Simple star rating component for your React projects.
npm install react-rating-stars-componentreact-stars: https://github.com/n49/react-stars
npm install react-rating-stars-component --save
javascript
import ReactStars from "react-rating-stars-component";
import React from "react";
import { render } from "react-dom";
const ratingChanged = (newRating) => {
console.log(newRating);
};
render(
count={5}
onChange={ratingChanged}
size={24}
activeColor="#ffd700"
/>,
document.getElementById("where-to-render")
);
`
Or use other elements as icons:
> We do not support CSS for other third party libraries like fontawesome in this case. So you must import it by urself.
!react-stars-fa
`javascript
import ReactStars from "react-rating-stars-component";
import React from "react";
import { render } from "react-dom";
const ratingChanged = (newRating) => {
console.log(newRating);
};
render(
count={5}
onChange={ratingChanged}
size={24}
isHalf={true}
emptyIcon={}
halfIcon={}
fullIcon={}
activeColor="#ffd700"
/>,
document.getElementById("where-to-render")
);
`
$3
This a list of props that you can pass down to the component:
| Property | Description | Default value | type |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
| classNames | Name of parent classes | 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 |
| color | Color of inactive star (this supports any CSS valid value) | gray | string |
| activeColor | 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 |
| isHalf | 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 |
| emptyIcon | Use your own elements as empty icons | null | element |
| halfIcon | Use your own elements as half filled icons | null | element |
| filledIcon | Use your own elements as filled icons | null | element |
| a11y | Should component be accessible and controlled via keyboard (arrow keys and numbers) | true | boolean |
| onChange(new_rating) | Will be invoked any time the rating is changed | null | function |
$3
###### Build on your machine:
`bash
Clone the repo
git clone git@github.com:ertanhasani/react-stars.git
Go into project folder
cd react-stars
Install dependancies
npm install
`
Build the component:
`bash
npm build
`
Run the examples (dev):
`bash
npm run dev-example
`
Build the examples (production):
`bash
npm run build-example
``