react-star-rate

Lightweight, customizable star ratings component for React


Keywords
react, reactjs, rating, star, input
License
MIT
Install
npm install react-star-rate@0.2.0

Documentation

React Star Rate

NPM Version minzipped size Build Status

Lightweight, customizable star ratings component for React.

Created by Raymon Zhang

Features

  • 🔩 Easily Customizable
  • 🕊 Lightweight - less than 4kb including styles
  • ✅ Accessible

Table of contents

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 Support 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
symbol string "★" The symbol to be displayed
tabIndex number 0 The tab index of the stars container
value number - Controlled value of the component

Example

You can visit the example here: https://codesandbox.io/s/react-star-rate-okxlw.