Popularity
3.1
Stable
Activity
0.0
Stable
173
5
55
Programming language: JavaScript
License: MIT License
Tags:
UI Components
Star Rating
Latest version: v1.4.2
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
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?
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
*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.