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

yarn add react-star-rate

With NPM

npm install react-star-rate

Getting Started

You can add React Stars Rating to your project using the <StarsRating /> component.

import { useState } from 'react';

import StarsRating from 'react-star-rate';

const App = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <StarsRating
        value={value}
        onChange={value => {
          setValue(value);
        }}
      />
    </div>
  );
};

Props

| 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

Style Object

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.

With CSS

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.