@chepchik/react-rating
Version:
React Rating is a react rating component which supports custom symbols both with inline styles and icon.
66 lines (50 loc) • 5.14 kB
Markdown
# 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](https://github.com/dreyescat/react-rating) library. Rewritten in components and typescript.
## Demo
In progress.
## Installation
You can install `react-rating` component using the _npm_ package manager:
```bash
npm i @chepchik/react-rating
```
## Usage
```jsx
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_