stars-rating ⭐️
A simple star rating component for your React projects (now with half stars and custom characters)
Get started quickly
Install stars-rating package with NPM:
npm install stars-rating --save
Then in your project include the component:
const ratingChanged = { console} ;
API
This a list of props that you can pass down to the component:
Property | Description | Default value | type |
---|---|---|---|
className |
Name of parent class | null |
string |
count |
How many total stars you want | 5 | number |
value |
Set rating value | 0 | number |
char |
Which character you want to use as a star | ★ | string |
color1 |
Color of inactive star (this supports any CSS valid value) | gray |
string |
color2 |
Color of selected or active star | #ffd700 |
string |
size |
Size of stars (in px) | 15px |
string |
edit |
Should you be able to select rating or just see rating (for reusability) | true |
boolean |
half |
Should component use half stars, if not the decimal part will be dropped otherwise normal algebra rools will apply to round to half stars | true |
boolean |
onChange(new_rating) |
Will be invoked any time the rating is changed | null |
function |
Help improve the component
Build on your machine:
# Clone the repo git clone git@github.com:daluobohao/stars-rating.git# Go into project folder cd stars-rating# Install dependancies npm install
Build the component:
npm build
Run the examples (dev):
npm run dev-example
Build the examples (production):
npm run build-example
Then in your browser go to: http://127.0.0.1:8080/example
Requirements
You will need to have React in your project in order to use the component, I didn't bundle React in the build, because it seemed like a crazy idea.
Todo
- Make better docs
- Better state management
- Write tests