DEV Community

loading...
Cover image for React Rating

React Rating

primetek profile image PrimeTek ・1 min read

React Rating componentsis a star based selection input.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Rating } from 'primereact/rating';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Rating is used a controlled input component with value and onChange properties.

<Rating value={value} onChange={(e) => setValue(e.value)} />
Enter fullscreen mode Exit fullscreen mode

Number of Stars

Number of stars to display is defined with stars property, default is 5.

<Rating value={value} onChange={(e) => setValue(e.value)} stars={5} />
Enter fullscreen mode Exit fullscreen mode

Cancel

A cancel icon is displayed to reset the value by default, set cancel as false to remove this option.

<Rating value={value} onChange={(e) => setValue(e.value)} cancel={5} />
Enter fullscreen mode Exit fullscreen mode

Theming

Rating supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Rating showcase for demos and documentation.

Discussion (0)

pic
Editor guide