react-stars-rating

react-stars-rting is a react component that allows you to add ratings to your applications.

Usage

Install

$ npm install react-stars-rating --save

or

$ yarn add react-stars-rating

Usage

import StarsRating from 'react-stars-rating';

Example

import React from 'react';
import StarsRating from 'react-stars-rating';

class MyComponent extends React.Component {
  render() {
    return (
      <StarsRating rating={3} />
    );
  }
}

React.render(<MyComponent />, document.getElementById('app'));

PropTypes

| Prop Name | Type | Default | Required | Description | |---------------|----------|---------------------------|----------|------------------------------------------------------------------------| | name | String | rating-123456 (timestamp) | false | name of the rating used when the component is inside a form | | disabled | Boolean | false | false | disable the stars | | insideForm | Boolean | false | false | is the rating stars inside a form | | onRatingClick | Function | () => false | false | the callback used by the parent component. Call when a star is clicked | | rating | Number | | true | the rating to display | | theme | String | orange | false | theme color |

Available Themes

| Theme name | Theme color | |----------------|--------------------------------------------------------------------| | white | #FFFFFF | | snow | #F9FAFC | | darkSnow | #EFF2F7 | | extraDarkSnow | #E5E9F2 | | silver | #8492A6 | | slate | #3C4858 | | steel | #273444 | | black | #1F2D3D | | smoke | #E0E6ED | | darkSmoke | #D3DCE6 | | extraDarkSmoke | #C0CCDA | | lightBlue | #85D7FF | | blue | #1FB6FF | | darkBlue | #009EEB | | lightPurple | #A389F4 | | purple | #7E5BEF | | darkPurple | #592DEA | | lightPink | #FF7CE5 | | pink | #FF49DB | | darkPink | #FF16D1 | | lightOrange | #FF9E7C | | orange | #FF7849 | | darkOrange | #FF5216 | | lightGreen | #29EB7F | | green | #13CE66 | | darkGreen | #0F9F4F | | lightYellow | #FFD55F | | yellow | #FFC82C | | darkYellow | #F8B700 | | info | #1FB6FF | | success | #13CE66 | | danger | #FF4949 | | warning | #FFC82C |

Mentions

This component is inspired by the following codepen by Joseph Fusco and also many thanks to the guys from Marvel for having such a perfect color scheme.