React-star-picker NPM

Default features include

supports half-star precision
responsive hover highlighting
custom number of stars
value clearing option
input disabling

Support for custom star-renderer

Even more customizability is provided by the ability to use your own star-renderer. Read more here.

Documentation

Installation

npm i react-star-picker

Usage

Note To make this library SSR compatible, versions starting from 3.0.0 export an ES module instead of the previously exported UMD bundle. The major difference is that styles are no longer bundled with the component code and need to be imported separately from react-star-picker/styles.css.

import React, { useState } from 'react';
import StarPicker from 'react-star-picker';
// vvv Starting from v3.0.0 we need to import the styles separately. This is best done in a wrapper component.
import 'react-star-picker/styles.css';
// ^^^

const ParentComponent = () => {
  const [rating, setRating] = useState(null);

  const onChange = (value) => {
    setRating(value);
  };

  return (
    <div>
      <StarPicker onChange={onChange} value={rating} />
    </div>
  );
};