react-stars-rting is a react component that allows you to add ratings to your applications.
$ npm install react-stars-rating --saveor
$ yarn add react-stars-ratingimport StarsRating from 'react-stars-rating';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'));| 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 |
| 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 |
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.