React component for star (or any other icon based) ratings
npm install react-star-rating-component


> Tiny React.js component for star (or any other icon based) ratings.
``bash`
npm install react-star-rating-component --save
`javascript0
value={Number} / number of selected icon ( - none, 1 - first) /5
starCount={Number} / number of icons in rating, default /#ffb400
onStarClick={Function(nextValue, prevValue, name)} / on icon click handler /
onStarHover={Function(nextValue, prevValue, name)} / on icon hover handler /
onStarHoverOut={Function(nextValue, prevValue, name)} / on icon hover out handler /
renderStarIcon={Function(nextValue, prevValue, name)} / it should return string or react component /
renderStarIconHalf={Function(nextValue, prevValue, name)} / it should return string or react component /
starColor={String} / color of selected icons, default /#333
emptyStarColor={String} / color of non-selected icons, default /true
editing={Boolean} / is component available for editing, default /`
/>
`javascript
import React from 'react';
import ReactDOM from 'react-dom';
import StarRatingComponent from 'react-star-rating-component';
class App extends React.Component {
constructor() {
super();
this.state = {
rating: 1
};
}
onStarClick(nextValue, prevValue, name) {
this.setState({rating: nextValue});
}
render() {
const { rating } = this.state;
return (
ReactDOM.render(
document.getElementById('app')
);
`
`javascript
import React from 'react';
import ReactDOM from 'react-dom';
import StarRatingComponent from 'react-star-rating-component';
class App extends React.Component {
render() {
const { rating } = this.state;
return (
ReactDOM.render(
document.getElementById('app')
);
``
Check more in examples folder.
---
MIT Licensed