A highly customizable star-rating component
- supports half-star precision
- responsive hover highlighting
- custom number of stars
- value clearing option
- input disabling
Even more customizability is provided by the ability to use your own star-renderer. Read more here.
npm i react-star-picker
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>
);
};