react-star-rating alternatives and similar libraries

Based on the "Star Rating" category.
Alternatively, view react-star-rating alternatives based on common mentions on social networks and blogs.

react-star-rating-input

1.7 0.0 react-star-rating VS react-star-rating-input

React.js components for entering 0—N stars (N is 5 by default), or displaying 0—N stars

Do you think we are missing an alternative of react-star-rating or a related project?

Add another 'Star Rating' Library

Popular Comparisons

README

react-star-rating

[](src/assets/star-rating.png)

A simple star rating component built with React.

Install

$ npm install react-star-rating --save

Include the css:

<link rel="stylesheet" href="node_modules/react-star-rating/dist/css/react-star-rating.min.css">

Usage

ES6

import React from 'react';
import StarRating from 'react-star-rating';

class FormComponent extends React.Component {
  render() {
    return (
      <form action="/api" method="POST">
        <StarRating name="airbnb-rating" caption="Rate your stay!" totalStars={5} />
        <button type="submit" className="btn btn-submit">Submit Rating</button>
      </form>
    );
  }
}

React.render(<FormComponent />, document.getElementById('star-rating'));

ES5

var React = require('react');
var StarRating = require('react-star-rating');

var FormComponent = React.createClass({
    render: function () {
      return (
        <form action="/api" method="POST">
          <StarRating name="airbnb-rating" caption="Rate your stay!" totalStars={5} />
          <button type="submit" className="btn btn-submit">Submit Rating</button>
        </form>
      );
    }
});

React.render(<FormComponent />, 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})

Todo

[x] Fix ES6 bug with bundling
[x] Add svg stars
[x] Double-check touch support works
[ ] Re-implement star hovering (kinda janky right now)

License

MIT

*Note that all licence references and agreements mentioned in the react-star-rating README section above are relevant to that project's source code only.