Rating
React Bootstrap 5 Rating
The interactive icons in the React Bootstrap 5 Rating component allow users to share their thoughts on your product. This allows you to obtain input from your product's users in order to improve the product's outcome.
Importing the React Bootstrap 5 Rating Component
When you wish to use the React Bootstrap 5 Rating component, you need to import CDBRating
into your project first.
import { CDBRating } from 'cdbreact';
Rating Component
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 Reference: Contrast React Bootstrap 5 Rating Props
This section will add on the information you already have about the props will use with the React Bootstrap 5 Rating component. You'll discover what these props do, how to apply them in your code, and what their default values are.
You will see that the table below shows other prop options of the CDBRating
.
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} .../> |
Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast