DEV Community

DEV Community is a community of 575,008 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create new account Log in
loading...
Cover image for React Rating

React Rating

#react #javascript #webdev
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

Read next

leviathanprogramming profile image

Never buy another domain name from GoDaddy again. Here's why.

𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming -

codingnepal profile image

Drag & Drop or Browse - File upload Feature using HTML CSS & JavaScript

CodingNepal -

kaymathew profile image

Setting up Adonis.js with Docker & MySQL

Caleb Mathew -

seanpgallivan profile image

Solution: Shortest Path in Binary Matrix

seanpgallivan -