Package Exports

@chepchik/react-rating
@chepchik/react-rating/dist/my-library.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chepchik/react-rating) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Rating

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.

@chepchik/react-rating