Rating

React Bootstrap 5 Rating component

Responsive react star rating built with Bootstrap 5, React 17 and Material Design. 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 from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBRating>
                <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() {
            return (
              <MDBRating defaultValue={3}>
                <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 from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [eventValue, setEventValue] = useState(0);

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

Custom text

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

        
            
          import React from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBRating>
                <MDBRatingElement className='px-2 d-flex align-items-center' itemId={1} icon='star' insertBefore='1' insertAfter='1' />
                <MDBRatingElement className='px-2 d-flex align-items-center' itemId={2} icon='star' insertBefore='2' insertAfter='2' />
                <MDBRatingElement className='px-2 d-flex align-items-center' itemId={3} icon='star' insertBefore='3' insertAfter='3' />
                <MDBRatingElement className='px-2 d-flex align-items-center' itemId={4} icon='star' insertBefore='4' insertAfter='4' />
                <MDBRatingElement className='px-2 d-flex align-items-center' itemId={5} icon='star' insertBefore='5' insertAfter='5' />
              </MDBRating>
            );
          }

Custom icons

You can use other icons easily using icon property.

        
            
          import React from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBRating>
                <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 from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBRating>
                <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 from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBRating>
                <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 from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBRating dynamic>
                <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 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'>
                  <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 from 'react';
          import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBRating>
                <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 onChange={(value) => setSelectValue(value)} >
                <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
defaultValue number - Rating default value <MDBRating defaultValue={4} />
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 />

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 React.ReactNode - Set a custom text after the icon <MDBRatingElement color="#3f51b5" insertAfter='1' />
insertBefore React.ReactNode - Set a custom text before the icon <MDBRatingElement color="#3f51b5" insertBefore='1' />
icon string - Defines rating element icon <MDBRatingElement icon="star" />
popover React.ReactNode - Set the text displayed in the popover (for use only on the icons element) <MDBRatingElement popover="exampleTitle" />
size 'sm' | 'lg' 'sm' Defines the icon size <MDBRatingElement size="lg" />