A simple star rating component built with React.
Clone or download
Latest commit b4d6ea1 Nov 9, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix: input tag display issue May 7, 2016
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 npmignore Nov 8, 2015
LICENSE gh-pages all Mar 8, 2015
README.md Update README.md Nov 10, 2016
changelog.md update changelog Nov 8, 2015
gulpfile.js get initial tests working with karma, webpack, chai Sep 8, 2015
index.html update deps, add touch events Jul 21, 2015
karma.conf.js 1.4.2 Nov 8, 2015
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