Search...

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.

js
import { CDBRating } from 'cdbreact';

Rating Component

Contrast React Bootstrap 5 Rating Component
js
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.

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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner