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.
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.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
| containerClassName | String | Adds custom classes to the container | <CDBRating containerClassName="myClass" ... /> | |
| tag | String | div | Changes default tag | <CDBRating tag="li" ... /> |
| data | Array | [{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'}]} ... /> |
| feedback | Boolean | false | If set to true, clicking a star will trigger a popover with a textarea | <CDBRating feedback .../> |
| fillClassName | String | fiveStars | Sets custom classes for filled icons | <CDBRating fillClassName="red-text" .../> |
| fillColors | Boolean or Array[String] | Sets custom colors for filled icons | <CDBRating fillColors={["red-text", "yellow-text"]} .../> | |
| iconClassName | String | Sets default icon's classes | <CDBRating iconClassName="blue-text" ... /> | |
| iconFaces | Boolean | false | Changes icon star for icon face | <CDBRating iconFaces .../> |
| iconSize | String | 1x | Sets size of icons | <CDBRating iconSize="2x" ... /> |
| iconRegular | Boolean | false | Sets regular style of icons | <CDBRating iconRegular .../> |
| submitHandler | function | Returns feedback form value | <CDBRating summitHandler={handleSubmit} .../> |