react-star-rate

Features

- 🔩 Easily Customizable
- 🕊 Lightweight - _less than 4kb including styles_
- ✅ Accessible

Table of contents

- Example
- Installation
- With yarn
- With NPM
- Getting Started
- Props
- Styling
- Style Object
- Style Keys
- With CSS
- Classnames
- License

Example

You can visit the example here:



Installation

#### With yarn

``sh
yarn add react-star-rate
`

#### With NPM

`sh
npm install react-star-rate
`

Getting Started

You can add React Stars Rating to your project using the component.

`jsx
import { useState } from 'react';

import StarsRating from 'react-star-rate';

const App = () => {
const [value, setValue] = useState(0);
return (


| Name | Type | Default | Description |
| ----------------- | -------- | ------------------- | ---------------------------------------------------------------------------------- |
| allowClear | boolean | true | Allow the value to be reset when clicked again |
| allowHalf | boolean | true | Allow half of the star to be selected |
| autoFocus | boolean | - | Automatically focus the element |
| classNamePrefix | string | "react-star-rate" | The components will have classNames with the given prefix |
| count | number | 5 | Number of stars |
| defaultValue | number | 0 | The default value of the stars. Should be the same as the default useState value |
| direction | string | "ltr" | The direction of the selected stars. Either "ltr" or "rtl" |
| disabled | boolean | false | Disable the rating element |
| onBlur | function | - | Will be triggered on blur |
| onChange | function | (value) => {} | Will be triggered on change of value |
| onFocus | function | - | Will be triggered on focus |
| onHoverChange | function | (value) => {} | Will be triggered on hover |
| style | object | {} | Custom styles. See styling |
| symbol | string | "★" | The symbol to be displayed |
| tabIndex | number | 0 | The tab index of the stars container |
| value | number | - | Controlled value of the component |

Styling

$3

Each component inside the StarsRating component is keyed and ships with default styles. You can apply custom styles by accessing the key on the style prop.

#### Style Keys

- style.style - The main wrapper ul element.
- style.full - Styles for when the star is fully active.
- style.full.star - The wrapper li element every star.
- style.full.first - The first half star, on top.
- style.full.second - The second full star, in the background.
- style.half - Styles for when the star is half active.
- style.half.star - The wrapper li element every star.
- style.half.first - The first half star, on top.
- style.half.second - The second full star, in the background.
- style.zero - Styles for when the star is not active.
- style.zero.star - The wrapper li element every star.
- style.zero.first - The first half star, on top.
- style.zero.second - The second full star, in the background.
- style.hover - Styles for when the element is hovered over. You can use access of the keys listed above in the hover object.

$3

You can also apply custom styles using CSS Stylesheets. The classnames are determined with the classNamePrefix prop (defaults to "react-star-rate").

#### Classnames

- ${classNamePrefix} - The main ul element.
- ${classNamePrefix}--ltr | - ${classNamePrefix}--rtl - If the rating component is from left-to-right or right-to-left respectively.
- ${classNamePrefix}__star - The star li element.
- ${classNamePrefix}__star--zero | ${classNamePrefix}__star--half | ${classNamePrefix}__star--full - When the star is inactive, half, or completely full.
- ${classNamePrefix}__star__first - The first half star, on top.
- ${classNamePrefix}__star__second` - The second full star, in the background.

License

MIT Licensed. Copyright (c) 2021-present, Raymon Zhang.