# react-stars

> Simple star rating component for your React projects

Latest version **2.2.5** (published 2017-11-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-stars
pnpm add react-stars
yarn add react-stars
bun add react-stars
```

## Health

**Score 18/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.5 |
| Published | 2017-11-06 |
| First published | 2016-04-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | separate (@types/react-stars) |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 226 |
| Author | Oleg Berman |
| Maintainers | olegberman, ryanmarr |
| Keywords | star, rating, react, star, rating, component, raty |

## Links

- npm: https://www.npmjs.com/package/react-stars
- Repository: https://github.com/n49/react-stars
- Homepage: https://github.com/n49/react-stars#readme
- Issues: https://github.com/n49/react-stars/issues
- npm.io page: https://npm.io/package/react-stars

## 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

- 2.2.5 (latest) — 2017-11-06
- 2.2.4 — 2017-10-06
- 2.2.3 — 2017-08-07
- 2.2.2 — 2017-08-07
- 2.1.0 — 2016-04-14
- 2.0.6 — 2016-04-04
- 2.0.5 — 2016-04-04
- 2.0.4 — 2016-04-01
- 2.0.3 — 2016-04-01
- 2.0.1 — 2016-04-01
- 2.0.0 — 2016-04-01

## README

# react-stars :star:
###### A simple star rating component for your React projects (now with half stars and custom characters)

![react-stars](http://i.imgur.com/VDbzbqF.gif)

### Get started quickly

###### Install react-stars package with NPM:
`npm install react-stars --save`

Then in your project include the component:

```javascript
import ReactStars from 'react-stars'
import React from 'react'
import { render } from 'react-dom'

const ratingChanged = (newRating) => {
  console.log(newRating)
}

render(<ReactStars
  count={5},
  onChange={ratingChanged},
  size={24},
  color2={'#ffd700'} />,

  document.getElementById('where-to-render')
);
```
### API

This a list of props that you can pass down to the component:

| Property | Description | Default value | type |
| -------- | ----------- | ------------- | ---- |
| `className`  | Name of parent class | `null` | string |
| `count`  | How many total stars you want  | 5 | number |
| `value`  | Set rating value  | 0 | number |
| `char` | Which character you want to use as a star | ★ | string |
| `color1` | Color of inactive star (this supports any CSS valid value) | `gray` | string |
| `color2` | Color of selected or active star | `#ffd700` | string |
| `size` | Size of stars (in px) | `15px` | string |
| `edit` | Should you be able to select rating or just see rating (for reusability) | `true` | boolean |
| `half` | Should component use half stars, if not the decimal part will be dropped otherwise normal algebra rools will apply to round to half stars | `true` | boolean
| `onChange(new_rating)` | Will be invoked any time the rating is changed | `null` | function |

### Help improve the component
###### Build on your machine:
```bash
# Clone the repo
git clone git@github.com:n49/react-stars.git
# Go into project folder
cd react-stars
# Install dependancies
npm install
```
Build the component:
```bash
npm build
```
Run the examples (dev):
```bash
npm run dev-example
```
Build the examples (production):
```bash
npm run build-example
```

Then in your browser go to: [http://127.0.0.1:8080/example](http://127.0.0.1:8080/example)

### Requirements

You will need to have React in your project in order to use the component, I didn't bundle React in the build, because it seemed like a crazy idea.

### Todo

* Make better docs
* Better state management
* Write tests

---
_Source: https://npm.io/package/react-stars · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._