React Bootstrap Rating

React Rating - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Show code

        
            
        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.

Show code

        
            
            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

Show code

        
            
        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.

Show code

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

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

          export default RatingPage;

React 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

Show code

javascript

        
            
        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} />`