https://github.com/NdYAG/react-rater
⭐️ Interative & customizable star rater
https://github.com/NdYAG/react-rater
rater react react-component star-rater
Last synced: 10 months ago
JSON representation
⭐️ Interative & customizable star rater
- Host: GitHub
- URL: https://github.com/NdYAG/react-rater
- Owner: NdYAG
- License: bsd-3-clause
- Created: 2014-12-17T06:43:25.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T16:15:47.000Z (over 2 years ago)
- Last Synced: 2024-03-15T02:31:24.135Z (over 2 years ago)
- Topics: rater, react, react-component, star-rater
- Language: JavaScript
- Homepage: https://rawgit.com/ndyag/react-rater/master/example/index.html
- Size: 4.36 MB
- Stars: 189
- Watchers: 6
- Forks: 30
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-rater
Star rater [](https://travis-ci.org/NdYAG/react-rater)
[Check out our new demo!](https://rawgit.com/ndyag/react-rater/master/example/index.html)
## Install
```
npm install react-rater
```
```js
import Rater from 'react-rater'
import 'react-rater/lib/react-rater.css'
// ...
render() {
return ()
}
```
Note: If your react version is under 16.8.0 without hooks support, please keep using react-rater@5
## API
```html
```
All attributes are optional.
- `total`: Number, default 5
- `rating`: Number, default 0
- `interactive`: Boolean, default `true`. Create a read-only rater by setting this attribute to `false`.
- `onRate`: `function({ rating })`. Callback to retrieve rating value. Called after rated.
- `onRating`: `function({ rating })`. Callback to retrieve rating value. Called during rating (mouse moving between stars).
- `onCancelRate`: `function({ rating })`. Called when mouse moves out from rater.
From version 5.0.0, callback is split into `onRate` & `onRating` & `onCancelRate`. `onRate` is called when mouse click, while `onRating` is called when mouse moves between star components and `onCancelRate` is called when mouse leaves rater. Usually you only need `onRate`.
### Read-only mode
Set `interactive={false}` to create a read-only rater.
In read-only mode, `rating` could contain a fractional part like `3.6`. (Thanks to @devmtnaing)
### Callback
`onRate` & `onRating`
(`rating` is passed with the React's [SyntheticEvent](https://facebook.github.io/react/docs/events.html))
```
{
rating: Number
...syntheticEvent
}
```
## Styling
### The CSS way
```scss
$react-rater-link: #ccc !default; // color of star not rated
$react-rater-hover: #666 !default; // color of star on hover
$react-rater-active: #000 !default; // color of star rated
```
### The JS way
`` will repeat its children until counts reach `total`. https://github.com/NdYAG/react-rater/blob/master/src/index.js#L69
In this way you can define your own 'star' component ([src/star.js](https://github.com/NdYAG/react-rater/blob/master/src%2Fstar.js)).
```html
```
and style it based on these props:
```
{
isActive: PropTypes.bool,
isActiveHalf: PropTypes.bool,
willBeActive: PropTypes.bool,
isDisabled: PropTypes.bool
}
```
## Real world example
Valentine's Day:
Abilu judge system for Douban Music:
## License
BSD.