Rating

Rating

Bootstrap 5-star rating plugin can be used to allow the users to share their opinion about the product, documentation page, photo and more.

Visit API by scrolling down for all available properties and events.

Examples

Default Rating example.

ratingImg
import React from "react";
import { CDBRating, CDBContainer } from "cdbreact";
const Rating = () => {
return (
<CDBContainer>
<CDBRating iconRegular />
<CDBRating iconFaces fillClassName='black-text' iconRegular />
<CDBRating feedback/>
</CDBContainer>
);
};
export default Rating;

API

In this section you will find advanced information about the Rating component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Rating Import Statement

You need to import the Contrast Rating component first before using it.

import { CDBRating } from "cdbreact";

API Reference: Contrast Rating Properties

The table below shows the configuration options of the CDBRating component.

NameTypeDefaultDescriptionExample
containerClassNameStringAdds custom classes to the container<CDBRating containerClassName="myClass" ... />
tagStringdivChanges default tag<CDBRating tag="li" ... />
dataArray[{tooltip: 'Very Bad'}, {tooltip: 'Poor'}, {tooltip: 'Ok'}, {tooltip: 'Good'},{tooltip: 'Excellent'}]Sets custom data of icon property.<CDBRating data={[{tooltip: 'Very Bad'}, {tooltip: 'Poor'}, {tooltip: 'Ok'}, {tooltip: 'Good'},{tooltip: 'Excellent'}]} ... />
feedbackBooleanfalseIf set to true, clicking a star will trigger a popover with a textarea<CDBRating feedback .../>
fillClassNameStringfiveStarsSets custom classes for filled icons<CDBRating fillClassName="red-text" .../>
fillColorsBoolean or Array[String]Sets custom colors for filled icons<CDBRating fillColors={["red-text", "yellow-text"]} .../>
iconClassNameStringSets default icon's classes<CDBRating iconClassName="blue-text" ... />
iconFacesBooleanfalseChanges icon star for icon face<CDBRating iconFaces .../>
iconSizeString1xSets size of icons<CDBRating iconSize="2x" ... />
iconRegularBooleanfalseSets regular style of icons<CDBRating iconRegular .../>
submitHandlerfunctionReturns feedback form value<CDBRating summitHandler={handleSubmit} .../>