Windframe Import update is finally here!


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

Contrast React Bootstrap 5 Rating Component
import React from 'react';
import { CDBRating, CDBContainer } from 'cdbreact';
const Rating = () => {
return (
<CDBRating iconRegular />
<CDBRating iconFaces fillClassName="black-text" iconRegular />
<CDBRating feedback />
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.

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} .../>

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