Nanobots Protecting Microbots

    react-star-rating

    1.4.2 • Public • Published

    react-star-rating

    NPM

    A simple star rating component built with React.

    v1.4.0 coming soon.

    Install

    $ npm install react-star-rating --save

    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!" ratingAmount={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!" ratingAmount={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

    Keywords

    none

    Install

    npm i react-star-rating

    DownloadsWeekly Downloads

    1,243

    Version

    1.4.2

    License

    MIT

    Last publish

    Collaborators

    • cameronjroe