web
mobile

Rating

Bootstrap 5-Star Rating

Bootstrap 5-star rating plugin can be used to allow the users to share their opinion about the product, documentation page, photo and more.

Visit API tab for all available properties and events.


Basic Example

Simple 5 star rating. Use data property to get and set value custom data.z


        import React, { useState } from 'react';
        import { MDBContainer, MDBRating } from 'mdbreact';

        const RatingPage = () => {
          const [basic] = useState([
            {
              tooltip: 'Very Bad'
            },
            {
              tooltip: 'Poor'
            },
            {
              tooltip: 'Ok',
              choosed: true
            },
            {
              tooltip: 'Good'
            },
            {
              tooltip: 'Excellent'
            }
          ]);

          return (
            <MDBContainer>
              <MDBRating data={basic} />
            </MDBContainer>
          );
        };

        export default RatingPage;

      

Empty five stars

5 empty stars rating with filling colour on hover.


            import React from 'react';
            import { MDBContainer, MDBRating } from 'mdbreact';

            const RatingPage = () => {
              return (
                <MDBContainer>
                  <MDBRating iconRegular />
                </MDBContainer>
              );
            };

            export default RatingPage;

          

Faces Rating

5 faces that changes mood on hover


        import React from 'react';
        import { MDBContainer, MDBRating } from 'mdbreact';

        const RatingPage = () => {
          return (
            <MDBContainer>
              <MDBRating
                iconFaces
                fillClassName='black-text'
                iconRegular
              />
            </MDBContainer>
          );
        };

        export default RatingPage;

      

Rating with feedback

Adding prop feedback will enable popover with textarea on click.


        import React from 'react';
        import { MDBContainer, MDBRating } from 'mdbreact';

        const RatingPage = () => {
          return (
            <MDBContainer>
              <MDBRating feedback/>
            </MDBContainer>
          );
        };

        export default RatingPage;

      

Rating - API

In this section you will find advanced information about the Rating component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement


        import { MDBRating } from "mdbreact";
      

Rating

API Reference: Properties

Name Type Default Description Example
containerClassName String - Adds custom classes for container <MDBRating tag="li"/>
data Array [ { tooltip: 'Very Bad' }, { tooltip: 'Poor' }, { tooltip: 'Ok' }, { tooltip: 'Good' }, { tooltip: 'Excellent' } ] Sets custom data of icon property. <MDBRating data={[ { tooltip: 'Bad' }, { tooltip: 'Poor' }, { tooltip: 'Ok', choosed: true }, { tooltip: 'Nice' }, { tooltip: 'Excellent' } ]} />
feedback Boolean false If set to true, clicking a star will trigger a popover with a textarea <MDBRating feedback/>
fillClassName String - Sets custom classes for filled icons <MDBRating fillClassName='red-text' />
fillColors Array / Boolean - Sets custom colors for filled icons <MDBRating fillColors={[ 'red-text', 'orange-text', 'yellow-text', 'lime-text', 'light-green-text' ]} /> <MDBRating fillColors />
iconClassName String "grey-text" Sets default icon's classes <MDBRating iconClassName="yellow-text"/>
iconFaces Boolean false Changes icon star for icon face <MDBRating iconClassName="yellow-text"/>
iconSize String "1x" Sets size of icons <MDBRating iconSize="2x"/>
iconRegular Boolean false Sets regular style of icons <MDBRating iconRegular />
tag String 'div' Sets a tag of the rating component <MDBRating tag="li"/>

Options structure

Property data takes as an argument an Array of objects. Available keys for those objects are:

  • icon
  • tooltip
  • choosed

        {
          icon: String,
          tooltip: String,
          choosed: Boolean,
        }
      

API Reference: Methods

Name Parameters Description Example
getValue Returns updated component value. <MDBRating getValue={this.handlePickerValue} />
submitHandler Returns feedback form value <MDBRating submitHandler={this.handleOnSubmnit} />