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-rateWith NPM
npm install react-star-rateGetting 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.
