A simple star rating component built with React.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test remove webpack Nov 8, 2015
.babelrc v1.4.x prep Nov 8, 2015
.eslintrc es6 support May 22, 2015
.gitignore ignores Nov 8, 2015
.jshintrc es6 support May 22, 2015
.npmignore
LICENSE gh-pages all Mar 8, 2015
README.md Update README.md Nov 10, 2016
changelog.md update changelog Nov 8, 2015
gulpfile.js
index.html
karma.conf.js
package.json package: add repository field May 7, 2016

README.md

react-star-rating

NPM

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

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

License

MIT