Implement Star Rating In React-JS Using Primereact

Hello developers, In this blog we are going to implement star rating in our component using prime react

First, create a new component using this command:

npx create-react-app

After creating a new app install prime-react in your component using following command

npm i primereact primeflex primeicons

Then import important files in your file

import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import { Rating } from 'primereact/rating'

Then you’re good to go now just use rating star in your file wherever you want

const [value, setValue] = useState('')
 <div
       style={{
           height: '100vh',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center'
       }}>
       <Rating value={value} onChange={(e) => setValue(e.value)} />
 </div>

Demo:

You can also remove cancel button just add cancel={false} in rating component

<Rating value={value} cancel={false} onChange={(e) => setValue(e.value)} />

You can also make rating star only readonly just add readonly in rating component

<Rating value={value} readOnly onChange={(e) => setValue(e.value)} />

You can also disable rating stars just add disable true in rating component

<Rating value={value} disabled onChange={(e) => setValue(e.value)} />

You can also change cancel icon, on rating icon and off rating icon

<Rating value={value}
        cancelIcon={
            <img src={`https://www.primefaces.org/primereact/images/rating/cancel.png`}
                width="25px"
                height="25px"
            />
        }
        onIcon={
            <img
                src={`https://www.primefaces.org/primereact/images/rating/custom-icon-active.png`}
                width="25px"
                height="25px"
            />
        }
        offIcon={
            <img src={`https://www.primefaces.org/primereact/images/rating/custom-icon.png`}
                width="25px"
                height="25px"
            />
        }
        onChange={(e) => setValue(e.value)} />