react-star-picker

react-star-picker

A highly customizable star-rating component

Default features include

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

Read more in the docs.

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>
  );
};

Links to Docs

Props

Configuration

Styles

Examples