React-stars-rating NPM

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.

react star stars rating ratings

prop-types react react-dom styled-components

@everything-registry/sub-chunk-2614

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago