A simple, highly customisable rating component with Test
- Support Theme Customization
- Support Callback Handlers
- Thoroughly tested on all browsers
- Responsive
- With Tests
npm install --save react-rating-widget
import React, { PureComponent } from 'react'
import RatingWidget from 'react-rating-widget'
const ActiveStar = () => {
const styles = {
width: '50px',
height: '50px',
background: 'url(./assets/star-hover.svg) no-repeat center center',
...
};
return <div style={styles} ></div>;
};
const InactiveStar = () => {
const styles = {
width: '50px',
height: '50px',
background: 'url(./assets/star.svg) no-repeat center center',
...
};
return <div style={styles} ></div>;
};
const ratingReactions = {1: "Hated it!", 2: "Disliked it!", 3: "It's OK!", 4: "Liked it!", 5: "Loved it!"};
const reactionStyle = {
textAlign: 'center',
padding: '7px 0 4px',
...
};
export default class App extends PureComponent {
/* onClick Handler to store/process rating selected by user */
storeAnswers(answer)
{
console.log("You have rated us " + answer.answer);
...
}
render () {
return (
<div>
<RatingWidget
iconCount={6}
IconStyleActive = { ActiveStar }
IconStyleInactive = { InactiveStar }
storeAnswers={this.storeAnswers.bind(this)}
reactionLables={ratingReactions}
reactionStyle= {reactionStyle}
/>
</div>
)
}
}
Type: Number Default: 5
Number of icons(for eg. stars) to rate with
Type: React Component Default: React component
React Stateless component for icon styling when selected
Type: React Component Default: React component
React Stateless component for icon styling when not selected
Type: Function Default: undefined
A handler function that gets called when user rates(clicks the icon)
Type: Object Default: undefined
An object of reaction text to show when rating is chosen by user
Type: Object Default: undefined
Style object for reaction text
MIT © nitu05oct