Rating

React Bootstrap 5 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

        
            
          import React, { useState } from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [basicValue, setBasicValue] = useState(0);

            return (
              <MDBRating active={basicValue} setActive={setBasicValue}>
                <MDBRatingElement title='Bad' itemId={1} icon='star' />
                <MDBRatingElement title='Poor' itemId={2} icon='star' />
                <MDBRatingElement title='OK' itemId={3} icon='star' />
                <MDBRatingElement title='Good' itemId={4} icon='star' />
                <MDBRatingElement title='Excellent' itemId={5} icon='star' />
              </MDBRating>
            );
          }
          
        
    

Read only

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

        
            
          import React from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const readOnlyValue = 3;
            return (
              <MDBRating active={readOnlyValue}>
                <MDBRatingElement itemId={1} icon='star' />
                <MDBRatingElement itemId={2} icon='star' />
                <MDBRatingElement itemId={3} icon='star' />
                <MDBRatingElement itemId={4} icon='star' />
                <MDBRatingElement itemId={5} icon='star' />
              </MDBRating>
            );
          }
          
        
    

Events

        
            
          import React, { useState } from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [eventValue, setEventValue] = useState(0);

            return (
              <MDBRating active={eventValue} setActive={setEventValue}>
                <MDBRatingElement
                  itemId={1}
                  icon='star'
                  onClick={(e: MouseEvent) => console.log(e)}
                  onMouseEnter={(e: MouseEvent) => console.log(e)}
                />
                <MDBRatingElement
                  itemId={2}
                  icon='star'
                  onClick={(e: MouseEvent) => console.log(e)}
                  onMouseEnter={(e: MouseEvent) => console.log(e)}
                />
                <MDBRatingElement
                  itemId={3}
                  icon='star'
                  onClick={(e: MouseEvent) => console.log(e)}
                  onMouseEnter={(e: MouseEvent) => console.log(e)}
                />
                <MDBRatingElement
                  itemId={4}
                  icon='star'
                  onClick={(e: MouseEvent) => console.log(e)}
                  onMouseEnter={(e: MouseEvent) => console.log(e)}
                />
                <MDBRatingElement
                  itemId={5}
                  icon='star'
                  onClick={(e: MouseEvent) => console.log(e)}
                  onMouseEnter={(e: MouseEvent) => console.log(e)}
                />
              </MDBRating>
            );
          }
                 
        
    

Custom text

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

        
            
          import React, { useState } from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [textValue, setTextValue] = useState(0);

            return (
              <MDBRating active={textValue} setActive={setTextValue}>
                <MDBRatingElement className='px-2 d-flex' itemId={1} icon='star' insertBefore='1' insertAfter='1' />
                <MDBRatingElement className='px-2 d-flex' itemId={2} icon='star' insertBefore='2' insertAfter='2' />
                <MDBRatingElement className='px-2 d-flex' itemId={3} icon='star' insertBefore='3' insertAfter='3' />
                <MDBRatingElement className='px-2 d-flex' itemId={4} icon='star' insertBefore='4' insertAfter='4' />
                <MDBRatingElement className='px-2 d-flex' itemId={5} icon='star' insertBefore='5' insertAfter='5' />
              </MDBRating>
            );
          }
                 
        
    

Custom icons

You can use other icons easily using icon property.

        
            
          import React, { useState } from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [iconValue, setIconValue] = useState(0);

            return (
              <MDBRating active={iconValue} setActive={setIconValue}>
                <MDBRatingElement itemId={1} icon='heart' />
                <MDBRatingElement itemId={2} icon='heart' />
                <MDBRatingElement itemId={3} icon='heart' />
                <MDBRatingElement itemId={4} icon='heart' />
                <MDBRatingElement itemId={5} icon='heart' />
              </MDBRating>
            );
          }
                 
        
    

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.

        
            
          import React, { useState } from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [numberValue, setNumberValue] = useState(0);

            return (
              <MDBRating active={numberValue} setActive={setNumberValue}>
                <MDBRatingElement itemId={1} icon='star' />
                <MDBRatingElement itemId={2} icon='star' />
                <MDBRatingElement itemId={3} icon='star' />
                <MDBRatingElement itemId={4} icon='star' />
                <MDBRatingElement itemId={5} icon='star' />
                <MDBRatingElement itemId={6} icon='star' />
                <MDBRatingElement itemId={7} icon='star' />
                <MDBRatingElement itemId={8} icon='star' />
                <MDBRatingElement itemId={9} icon='star' />
                <MDBRatingElement itemId={10} icon='star' />
              </MDBRating>
            );
          }
                 
        
    

Icons custom color

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

        
            
          import React, { useState } from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [colorValue, setColorValue] = useState(0);

            return (
              <MDBRating active={colorValue} setActive={setColorValue}>
                <MDBRatingElement itemId={1} icon='star' color='#673ab7' />
                <MDBRatingElement itemId={2} icon='star' color='#3f51b5' />
                <MDBRatingElement itemId={3} icon='star' color='#2196f3' />
                <MDBRatingElement itemId={4} icon='star' color='#03a9f4' />
                <MDBRatingElement itemId={5} icon='star' color='#00bcd4' />
              </MDBRating>
            );
          }
                 
        
    

Dynamic icons

You can make you rating more dynamically by adding dynamic

        
            
          import React, { useState } from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [dynamicValue, setDynamicValue] = useState(0);

            return (
              <MDBRating dynamic active={dynamicValue} setActive={setDynamicValue}>
                <MDBRatingElement size='lg' itemId={1} icon='angry' color='#673ab7' />
                <MDBRatingElement size='lg' itemId={2} icon='frown' color='#3f51b5' />
                <MDBRatingElement size='lg' itemId={3} icon='meh' color='#2196f3' />
                <MDBRatingElement size='lg' itemId={4} icon='smile' color='#03a9f4' />
                <MDBRatingElement size='lg' itemId={5} icon='grin-stars' color='#00bcd4' />
              </MDBRating>
            );
          }
                 
        
    

Styling active elements

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

        
            
            import React, { useState } from 'react';
            import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [activeValue, setActiveValue] = useState(0);

              return (
                <MDBRating className='rating-active-example' active={activeValue} setActive={setActiveValue}>
                  <MDBRatingElement itemId={1} icon='star' />
                  <MDBRatingElement itemId={2} icon='star' />
                  <MDBRatingElement itemId={3} icon='star' />
                  <MDBRatingElement itemId={4} icon='star' />
                  <MDBRatingElement itemId={5} icon='star' />
                </MDBRating>
              );
            }
          
        
    
        
            
            .rating-active-example .active {
              color: #00c851 !important;
            }
          
        
    

Popover implementation example

Rating allows you to easily add popover functionality

        
            
          import React, { useState } from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [popoverValue, setPopoverValue] = useState(0);

            return (
              <MDBRating active={popoverValue} setActive={setPopoverValue}>
                <MDBRatingElement popover='Example text' itemId={1} icon='star' />
                <MDBRatingElement popover='Example text' itemId={2} icon='star' />
                <MDBRatingElement popover='Example text' itemId={3} icon='star' />
                <MDBRatingElement popover='Example text' itemId={4} icon='star' />
                <MDBRatingElement popover='Example text' itemId={5} icon='star' />
              </MDBRating>
            );
          }
                 
        
    

Get selected value

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

        
            
          import React, { useState, useEffect } from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [selectValue, setSelectValue] = useState(0);

            useEffect(() => {
              console.log(selectValue);
            }, [selectValue]);

            return (
              <MDBRating active={selectValue} setActive={setSelectValue}>
                <MDBRatingElement itemId={1} icon='star' />
                <MDBRatingElement itemId={2} icon='star' />
                <MDBRatingElement itemId={3} icon='star' />
                <MDBRatingElement itemId={4} icon='star' />
                <MDBRatingElement itemId={5} icon='star' />
              </MDBRating>
            );
          }
                 
        
    

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" />