https://github.com/voronianski/react-star-rating-component
Basic React component for star (or any other icon based) rating elements
https://github.com/voronianski/react-star-rating-component
component react star-ratings
Last synced: about 1 year ago
JSON representation
Basic React component for star (or any other icon based) rating elements
- Host: GitHub
- URL: https://github.com/voronianski/react-star-rating-component
- Owner: voronianski
- License: mit
- Created: 2015-11-17T22:28:47.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-02-11T00:46:32.000Z (over 3 years ago)
- Last Synced: 2025-05-10T16:18:47.679Z (about 1 year ago)
- Topics: component, react, star-ratings
- Language: JavaScript
- Homepage: http://voronianski.github.io/react-star-rating-component/example
- Size: 867 KB
- Stars: 380
- Watchers: 9
- Forks: 76
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-star-rating-component
[](http://badge.fury.io/js/react-star-rating-component)
[](http://david-dm.org/voronianski/react-star-rating-component)
[](http://www.npmjs.com/package/react-star-rating-component)
> Tiny [React.js](https://facebook.github.io/react) component for star (or any other *icon based*) ratings.
## Install
```bash
npm install react-star-rating-component --save
```
## Demo
[
](http://voronianski.github.io/react-star-rating-component/example)
## Props
```javascript
```
## Examples
### Editable
```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}
);
}
}
ReactDOM.render(
,
document.getElementById('app')
);
```
### Non-editable (with custom icons)
```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}
}
starCount={10}
value={8}
/>
);
}
}
ReactDOM.render(
,
document.getElementById('app')
);
```
Check more in [examples folder](https://github.com/voronianski/react-star-rating-component/tree/master/example).
---
**MIT Licensed**