react-star-rating-component
v1.4.1
React component for star (or any other icon based) ratings
10.8K/weekUpdated 3 years agoMITUnpacked: 70.5 KB
Published by Dmitri Voronianski
npm install react-star-rating-componentreact-star-rating-component
> Tiny React.js component for star (or any other icon based) ratings.
Install
``bash`
npm install react-star-rating-component --save
Demo
Props
`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 /`
/>
Examples
$3
`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 (
Rating from state: {rating}
starCount={10}
value={rating}
onStarClick={this.onStarClick.bind(this)}
/>
);
}
}
ReactDOM.render(
document.getElementById('app')
);
`
$3
`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 (
Rating from state: {rating}
editing={false}
renderStarIcon={() => }
starCount={10}
value={8}
/>
);
}
}
ReactDOM.render(
document.getElementById('app')
);
``
Check more in examples folder.
---
MIT Licensed