# react-stars-rating > A simple react stars rating component Latest version **0.0.5** (published 2017-12-18) · ISC license · 0 weekly downloads ## Install ```sh npm install react-stars-rating pnpm add react-stars-rating yarn add react-stars-rating bun add react-stars-rating ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.5 | | Published | 2017-12-18 | | First published | 2017-12-07 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Lazar Muresan | | Maintainers | lmuresan | | Keywords | react, star, stars, rating, ratings | ## Links - npm: https://www.npmjs.com/package/react-stars-rating - Repository: https://github.com/lmuresan/react-stars-rating - Homepage: https://github.com/lmuresan/react-stars-rating#readme - Issues: https://github.com/lmuresan/react-stars-rating/issues - npm.io page: https://npm.io/package/react-stars-rating ## Dependencies (4) - [react](https://npm.io/package/react.md) ^16.2.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.2.0 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.0 - [styled-components](https://npm.io/package/styled-components.md) ^2.2.4 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.5 (latest) — 2017-12-18 - 0.0.4 — 2017-12-14 - 0.0.3 — 2017-12-13 - 0.0.2 — 2017-12-13 - 0.0.1 — 2017-12-07 ## README # react-stars-rating [![NPM](https://nodei.co/npm/react-stars-rating.png?compact=true)](https://npmjs.org/package/react-stars-rating) react-stars-rting is a react component that allows you to add ratings to your applications. ## Usage ### Install ```sh $ npm install react-stars-rating --save ``` or ```sh $ yarn add react-stars-rating ``` ### Usage ```javascript import StarsRating from 'react-stars-rating'; ``` ### Example ```js import React from 'react'; import StarsRating from 'react-stars-rating'; class MyComponent extends React.Component { render() { return ( ); } } React.render(, 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](https://placehold.it/15/FFFFFF/000000?text=+) `#FFFFFF` | | snow | ![#F9FAFC](https://placehold.it/15/F9FAFC/000000?text=+) `#F9FAFC` | | darkSnow | ![#EFF2F7](https://placehold.it/15/EFF2F7/000000?text=+) `#EFF2F7` | | extraDarkSnow | ![#E5E9F2](https://placehold.it/15/E5E9F2/000000?text=+) `#E5E9F2` | | silver | ![#8492A6](https://placehold.it/15/8492A6/000000?text=+) `#8492A6` | | slate | ![#3C4858](https://placehold.it/15/3C4858/000000?text=+) `#3C4858` | | steel | ![#273444](https://placehold.it/15/273444/000000?text=+) `#273444` | | black | ![#1F2D3D](https://placehold.it/15/1F2D3D/000000?text=+) `#1F2D3D` | | smoke | ![#E0E6ED](https://placehold.it/15/E0E6ED/000000?text=+) `#E0E6ED` | | darkSmoke | ![#D3DCE6](https://placehold.it/15/D3DCE6/000000?text=+) `#D3DCE6` | | extraDarkSmoke | ![#C0CCDA](https://placehold.it/15/C0CCDA/000000?text=+) `#C0CCDA` | | lightBlue | ![#85D7FF](https://placehold.it/15/85D7FF/000000?text=+) `#85D7FF` | | blue | ![#1FB6FF](https://placehold.it/15/1FB6FF/000000?text=+) `#1FB6FF` | | darkBlue | ![#009EEB](https://placehold.it/15/009EEB/000000?text=+) `#009EEB` | | lightPurple | ![#A389F4](https://placehold.it/15/A389F4/000000?text=+) `#A389F4` | | purple | ![#7E5BEF](https://placehold.it/15/7E5BEF/000000?text=+) `#7E5BEF` | | darkPurple | ![#592DEA](https://placehold.it/15/592DEA/000000?text=+) `#592DEA` | | lightPink | ![#FF7CE5](https://placehold.it/15/FF7CE5/000000?text=+) `#FF7CE5` | | pink | ![#FF49DB](https://placehold.it/15/FF49DB/000000?text=+) `#FF49DB` | | darkPink | ![#FF16D1](https://placehold.it/15/FF16D1/000000?text=+) `#FF16D1` | | lightOrange | ![#FF9E7C](https://placehold.it/15/FF9E7C/000000?text=+) `#FF9E7C` | | orange | ![#FF7849](https://placehold.it/15/FF7849/000000?text=+) `#FF7849` | | darkOrange | ![#FF5216](https://placehold.it/15/FF5216/000000?text=+) `#FF5216` | | lightGreen | ![#29EB7F](https://placehold.it/15/29EB7F/000000?text=+) `#29EB7F` | | green | ![#13CE66](https://placehold.it/15/13CE66/000000?text=+) `#13CE66` | | darkGreen | ![#0F9F4F](https://placehold.it/15/0F9F4F/000000?text=+) `#0F9F4F` | | lightYellow | ![#FFD55F](https://placehold.it/15/FFD55F/000000?text=+) `#FFD55F` | | yellow | ![#FFC82C](https://placehold.it/15/FFC82C/000000?text=+) `#FFC82C` | | darkYellow | ![#F8B700](https://placehold.it/15/F8B700/000000?text=+) `#F8B700` | | info | ![#1FB6FF](https://placehold.it/15/1FB6FF/000000?text=+) `#1FB6FF` | | success | ![#13CE66](https://placehold.it/15/13CE66/000000?text=+) `#13CE66` | | danger | ![#FF4949](https://placehold.it/15/FF4949/000000?text=+) `#FF4949` | | warning | ![#FFC82C](https://placehold.it/15/FFC82C/000000?text=+) `#FFC82C` | ## Mentions This component is inspired by the following [codepen](https://codepen.io/fusco/pen/MwawEL) by [Joseph Fusco](https://twitter.com/heyfusco) and also many thanks to the guys from Marvel for having such a perfect [color scheme](https://marvelapp.com/styleguide/design/color-scheme). --- _Source: https://npm.io/package/react-stars-rating · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._