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.