react-rating-star-with-type

react-stars ⭐

A simple star rating component for your React projects

Get started quickly

Install react-stars package with NPM:

npm install react-rating-star-with-type --save

Install react-stars package with Yarn:

yarn add react-rating-star-with-type

Then in your project include the component:

import { useState } from "react";
import ReactStars from 'react-rating-star-with-type'

export default function app(){
    const [star, setStar] = useState(5);

    const onChange=(nextValue)=>{
        setStar(nextValue)
    }
    
    return <ReactStars 
    onChange={onChange} 
    value={4.2}  
    isEdit={true}  
    activeColors={[ "red", "orange", "#FFCE00", "#9177FF","#8568FC",]} 
    />
}

API

This a list of props that you can pass down to the component:

Property	Description	Default value	type
className	Name of wrapper class	""	string
count	How many total stars you want	5	number
value	Set rating value	0	number
emptyIcon	Which character you want to use as a star	(react-icons)	ReactNode
halfIcon	Which character you want to use as a half star	(react-icons)	ReactNode
filledIcon	Which character you want to use as a active star	(react-icons)	ReactNode
inactiveColor	Color of inactive star	#808080	string
activeColors	Colors of active star (depend of value)	[]	String[]
activeColor	Color of selected or active star	#FED900	string
size	Size of stars (if provide string you must mention unit , for example: "1rem" )	14	number or String
style	style object for component wrapper	{}	object
isEdit	Should you be able to select rating or just see rating (for reusability)	false	boolean
isHalf	isHalf true means you can select half star (make sure isEdit true if you set isHalf true)	false	boolean
valueShow	Should component use valueShow, if need Rating show with stars	false	boolean
onChange(new_rating)	Will be invoked any time the rating is changed	undefined	function

Help improve the component

Hit star on gitHub - https://github.com/ziaulhoque24/react-rating-star-with-type

Requirements

You will need to have React in your project in order to use the component, I didn't bundle React in the build, because it seemed like a crazy idea.

It also works perfectly with next js in client components. with the server component, you may get an error!