React-rating-system NPM

react-rating-system

A star rating component fully customizable made with React !

#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