Package Exports

react-stars-rating

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-stars-rating) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

$ 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.