react-rating-system

A star rating component fully customizable made with React !

Demo

Check out the demo

Install

npm install react-rating-system

Usage

Example

import React from 'react'
import ReactDOM from 'react-dom';
import Rating from 'react-rating-system';

class YourClass extends React.Component {
    render() {
        return (
            <Rating 
                image="../YOURPATH/imageName.png" bg="#333333" [...args]
            />
        );
    }
}

ReactDOM.render(
    <YourClass />, 
    document.getElementById('app')
);

Check out more examples in the source code of the demo above

Important

You will need to use an image with a solid background except for the zone you want to be "filled". Take a look at the images in /dist directory for a clearer understanding.

Props

• image: String - (REQUIRED) path to the icon image
• fillBG: String - (REQUIRED) filling color in css format (name, hex or rgb)
• initialBG: String - initial background color in css format (name, hex or rgb)
• initialValue: Number - initial value of rating (i.e. AJAX received)
• editable: Bool - whether users can vote or not
• callback: Function - callback function when a "star" is clicked, it will receive index (1 based) as arg
• lockRating: Bool - whether the user rating stay displayed or not after voting
• numberStars: Number - the number of "stars"
• containerStyle: Object - style of the rating component container

(See defaults)

MIT Licensed