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

Pane

Panel