{'react-star-rating'} easy star ratings with Test

v{currentVersion}

Installation


            {'$ npm install react-star-rating --save'}

Include the css:


            {''}

Usage

ES6


            {'import React from \'react\''}
            {'import StarRating from \'react-star-rating\''}
            {' '}
            {'class FormComponent extends React.Component {'}
            {'  render() { '}
            {'    return ('}
            {'      
'}
            {'        '}
            {'        '}
            {'      
'}
            {'    );'}
            {'  }'}
            {'}'}
            {' '}
            {'React.render(, document.getElementById(\'star-rating\'));'}

ES5


            {'var React = require(\'react\');'}
            {'var StarRating = require(\'react-star-rating\');'}
            {' '}
            {'var FormComponent = React.createClass({'}
            {'  render: function () { '}
            {'    return ('}
            {'      
'}
            {'        '}
            {'        '}
            {'      
'}
            {'    );'}
            {'  }'}
            {'});'}
            {' '}
            {'React.render(, document.getElementById(\'star-rating\'));'}

Options

name{'={string} - name for form input (required)'}
caption{'={string} - caption for rating (optional)'}
totalStars{'={number} - rating amount (required, default: 5)'}
rating{'={number} - a set rating between the rating amount (optional)'}
disabled{'={boolean} - whether to disable the rating from being selected (optional)'}
editing{'={boolean} - whether the rating is explicitly in editing mode (optional)'}
size{'={number} - size of stars (optional)'}
onRatingClick{'={function} - a handler function that gets called onClick of the rating (optional) - gets passed (event, {position, rating, caption, name})'}

Examples


            {'// handler in react class'}
            {'handleRatingClick: function (e, data) {'}
            {'    alert(\'You left a \' + data.rating + \' star rating for \' + data.caption);'}
            {'}'}
            {' '}
            {''}

{'If you\'re using ES6, make sure to bind the handler: '}{'this.handleRatingClick.bind(this, pass, args, here)'}


            {''}

{/*


            {''}

*/}


            {''}


            {''}


            {''}


            {''}


            {''}