React Rating
React Rating is a react rating component which supports custom symbols both with inline styles and glyphicons found in popular CSS Toolkits like Fontawesome or Bootstrap.
I intend to port the jQuery bootstrap-rating to a React component.
Demo
See react-rating in action.
Installation
You can install react-rating
component using the npm package manager:
npm install --save react-rating
Dependencies
The react-rating
component peer depends on the React library.
You can install React using npm too:
npm install --save react
Usage
-
Require the Rating Component
var Rating = require('react-rating');
-
Start using it
With raw javascript:
React.createElement(Rating)
Or with JSX:
<Rating />
Properties
Property | Type | Default | Description |
---|
start | number | 0 | Range starting value (exclusive). |
stop | number | 5 | Range stop value (inclusive). |
step | number | 1 | Step increment (negative) or decrement (positive). |
initialRate | number | undefined | Initial rate value. |
empty | string or object or array | Style.empty | Inline style object or classes applied to the rating symbols when empty. Or an array of such symbols that will be applied in a circular manner (round-robin). |
full | string or object or array | Style.full | Inline style object or classes applied to the rating symbols when full. Or an array of such symbols that will be applied in a circular manner (round-robin). |
readonly | bool | false | Whether the rating can be modified or not. |
fractions | number | 1 | Number of equal parts that make up a whole symbol. |
Callbacks
Callback | Type | Description |
---|
onChange | function (rate) {} | Called when the selected rate is changed. |
onRate | function (rate) {} | Called when a rate is entered or left. When a rate is left it is called with undefined . |
License
MIT License