Rating

React Bootstrap 5 Star Rating component

Responsive react star rating built with Bootstrap 5, React 17 and Material Design 2.0. Examples with stars or other custom symbols, styled active elements, dynamic icons and number of icons.

Rating component can be used to allow the users to share their opinion about the product, documentation page, photo and more.

Note: Read the API tab to find all available options and advanced customization


Basic example

You can automatically initialize the rating component using MDBRating


Read only

If you want to use a rating to show the score you can only pass the active property.


Events


Custom text

You can add extra text before or after the icon using insertAfter and insertBefore


Custom icons

You can use other icons easily using icon property.


Number of icons

If you want to display more or less icons in your rating, all you have to do is add as many rating elements like inside the MDBRating tag.


Icons custom color

If you want to set your own icon color you can use the color property


Dynamic icons

You can make you rating more dynamically by adding dynamic


Styling active elements

You can use active class to set different styles for selected elements


Popover implementation example

Rating allows you to easily add popover functionality


Get selected value

Get the value selected by the user. Open the browser console to test how it's work

Rating - API


Import


        import { 
          MDBRating,
          MDBRatingElement
        } from 'mdb-react-ui-kit';
      

Properties

MDBRating

Name Type Default Description Example
active Number - Rating active value <MDBRating active={activeValue} />
className String '' Add custom classes to MDBRating element <MDBRating className="class" />
dynamic Boolean false Dynamically change previous icons to the currently selected/hovered icon <MDBRating dynamic />
setActive Function - Sets rating active value <MDBRating setActive={setActiveValue} />
tag String 'ul' Defines tag of the MDBRating element <MDBRating tag="section" />

MDBRatingElement

Name Type Default Description Example
className String '' Add custom classes to MDBRatingElement element <MDBRatingElement className="class" />
color String '' Set icon color (for use only on the icons element) <MDBRatingElement color="#3f51b5" />
itemId Number - Sets element id number <MDBRatingElement itemId={1} />
iconClassName String '' Add custom classes to MDBRatingElement icon element <MDBRatingElement iconClassName={iconClasses} />
insertAfter Any - Set a custom text after the icon <MDBRatingElement color="#3f51b5" insertAfter='1' />
insertBefore Any - Set a custom text before the icon <MDBRatingElement color="#3f51b5" insertBefore='1' />
icon String - Defines rating element icon <MDBRatingElement icon="star" />
popover String 'primary' Set the text displayed in the popover (for use only on the icons element) <MDBRatingElement popover="exampleTitle" />
size String 'sm' Defines the icon size <MDBRatingElement size="md" />
title String '' Set the text displayed in the tooltip (for use only on the icons element) <MDBRatingElement title="exampleTitle" />
tag String 'li' Defines tag of the MDBRatingElement element <MDBRatingElement tag="section" />