Rating

React Bootstrap 5 Rating component

Responsive react star rating built with Bootstrap 5, React 18 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 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>
            );
          }

Controlled value

Create controlled component by passing value prop. Use a handler on onChange to update the state. 

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

            export default function App() {
              const [value, setValue] = useState(0);
              return (
                <MDBRating value={value} onChange={(val) => setValue(val)}>
                  <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() {

            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' 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 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() {

              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 - The default value. Use when the component is not controlled <MDBRating defaultValue={4} />
value number - The value of the rating <MDBRating value={4} />
dynamic Boolean false Dynamically change previous icons to the currently selected/hovered icon <MDBRating dynamic />
readonly boolean false Disable hover, click and keypress events. <MDBRating readonly />
style React.CSSProperties - Add custom styles to MDBRating element. <MDBRating style={customStyles} />

MDBRatingElement

Name Type Default Description Example
color string '' Set icon color (for use only on the icons element) <MDBRatingElement color="#3f51b5" />
itemId Number - Sets element id number <MDBRatingElement itemId={1} />
icon string - Defines rating element icon <MDBRatingElement icon="star" />
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' />
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" />

Events

MDBRating

Name Type Description
onChange (value: number) => void Fires immediately when the MDBRating component changes.

CSS variables

As part of MDB’s evolving CSS variables approach, rating now use local CSS variables on .rating for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

        
            
        // .rating
        --#{$prefix}rating-icon-padding: #{$rating-icon-padding};

SCSS variables

        
            
        $rating-icon-padding: 0.25rem;