React Rating 18 & 19

React Rating is a react rating component which supports custom symbols both with inline styles and icon.

This React component was inspired by the dreyescat/react-rating library. Rewritten in components and typescript.

Demo

In progress.

Installation

You can install react-rating component using the npm package manager:

npm i @chepchik/react-rating

Usage

import { Rating } from "@chepchik/react-rating";
...
const [rating, setRating] = useState<number>(3);

const handleRatingClick = (value: number) => {
  console.log("Clicked rating:", value);
  setRating(value);
};

<Rating
value={rating}
placeholderValue={rating}
readonly={false}
emptySymbol={<span style={{ color: "#ffcc00" }}>☆</span>}
fullSymbol={<span style={{ color: "#ffcc00" }}>★</span>}
onClick={handleRatingClick}
/>;

Properties

Prop Name	Type	Default Value	Description
totalSymbols	number	5	Total number of symbols (stars).
value	number	-	Current rating value. Must be >= 0.
placeholderValue	number	-	Placeholder value displayed on hover or when the rating is not set.
readonly	boolean	false	If true, the rating becomes read-only.
quiet	boolean	false	If true, event handling occurs only on touch.
fractions	number	1	Support for fractional values (e.g., 0.5).
direction	"ltr" or "rtl"	"ltr"	Text direction: left-to-right (ltr) or right-to-left (rtl).
emptySymbol	string or object or React.ReactElement or Array<string or object or React.ReactElement> or -	-	Customization for the appearance of empty symbols (stars).
fullSymbol	string or object or React.ReactElement or Array<string or object or React.ReactElement> or -	-	Customization for the appearance of filled symbols (stars).
placeholderSymbol	string or object or React.ReactElement or Array<string or object or React.ReactElement> or undefined	-	Customization for the appearance of placeholder symbols (stars).
onClick	(value: number, event: React.MouseEvent or React.TouchEvent) => void	-	Function called when a symbol is clicked.
onHover	(value?: number) => void	() => {}	Function called when hovering over a symbol.
className	string	-	CSS class for the root element.
id	string	-	ID for the root element.
style	React.CSSProperties	-	Inline styles for the root element.
tabIndex	number	-	tabindex attribute value for the root element.
aria-label	string	-	aria-label attribute for accessibility.

---

I would be glad for your support