Lightweight, customizable star ratings component for React.

_{Created by Raymon Zhang}

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.