# react-star-rating-element

> A customizable star rating component for selecting x stars or visualizing x stars

Latest version **1.0.7** (published 2022-04-16) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install react-star-rating-element
pnpm add react-star-rating-element
yarn add react-star-rating-element
bun add react-star-rating-element
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2022-04-16 |
| First published | 2022-03-05 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Miler Vadim |
| Maintainers | vdmiler |
| Keywords | react, component, star, stars, rating, ratings, star ratings, star rating, rate, input, svg, SVG, star rating component, svg icons, react star rating component |

## Links

- npm: https://www.npmjs.com/package/react-star-rating-element
- Repository: https://github.com/vdmiler/react-star-rating-element
- Homepage: https://github.com/vdmiler/react-star-rating-element#readme
- Issues: https://github.com/vdmiler/react-star-rating-element/issues
- npm.io page: https://npm.io/package/react-star-rating-element

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.17.2

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

- 1.0.7 (latest) — 2022-04-16
- 1.0.6 — 2022-03-08
- 1.0.5 — 2022-03-05
- 1.0.4 — 2022-03-05
- 1.0.3 — 2022-03-05
- 1.0.2 — 2022-03-05
- 1.0.1 — 2022-03-05
- 1.0.0 — 2022-03-05

## README

# React Star Rating Element

> Customizable react star ratings. SVG stars that show aggregate star ratings to the hundreths decimal point.

## [Install](https://www.npmjs.com/package/react-star-rating-element)

```shell
npm install --save react-star-rating-element
```
### Demo Example Image

![](https://user-images.githubusercontent.com/64083482/156881983-e806302e-7786-47cc-81d6-9401c0e4d141.gif)

## Usage

```js
import { StarRating } from 'react-star-rating-element';

function App() {
  const [rating, setRating] = useState(0);

  return (
    <div className="App">
      <div className="Wrapper">
        <StarRating
          ratingValue={rating}
          changeRating={setRating}
          starEmptyColor="#999999"
          starSpacing={10}
          starDimension={30}
        />
        <p className="Indicator">
          The rating is <span>{rating}</span>
        </p>
      </div>
    </div>
  );
}

export default App;
```

## API

| Prop | Type | Default | Description | Example |
| ---- | ---- | ------- | ----------- | ------- |
| rating | string | '' | Component's unique identification. Can be used when more than one star rating components are used | 'rating' |
| ratingValue | number | 0 | The user's rating. Number of stars to highlight. | `3` |
| changeRating | function | ()=>{} | Callback that will be passed the new rating a user selects |  |
| numberOfStars | number | 5 | The max number of stars to choose from or to display | `6` |
| starRatedColor | string | '#ff8039' | Color of stars that the user has rated | `black` |
| starEmptyColor | string | '#999999' | Color of stars that the use hasn't rated | `grey` |
| starDimension | number | '13' | The width and height of the star | `15 x 15` |
| starSpacing | number | '2' | The spacing between the stars | `10` :star: `10` :star: |
| svgIconPath | string | 'M6.5 1.61803L7.48381 4.6459L7.59607 4.99139H7.95934H11.143L8.56737 6.86271L8.27348 7.07624L8.38573 7.42173L9.36955 10.4496L6.79389 8.57827L6.5 8.36475L6.20611 8.57827L3.63045 10.4496L4.61426 7.42173L4.72652 7.07624L4.43263 6.86271L1.85697 4.99139H5.04066H5.40393L5.51619 4.6459L6.5 1.61803Z' | Set a path that describes the svg shape | 'M6.5 1.61803L7.48381 4.6459L7.59607 4.99139H7.95934H11.143L8.56737 6.86271L8.27348 7.07624L8.38573 7.42173L9.36955 10.4496L6.79389 8.57827L6.5 8.36475L6.20611 8.57827L3.63045 10.4496L4.61426 7.42173L4.72652 7.07624L4.43263 6.86271L1.85697 4.99139H5.04066H5.40393L5.51619 4.6459L6.5 1.61803Z' |

## Browser Support

Supports Chrome, firefox, safari, edge, and ie 9+.
The star is SVG, so this library fails for any browser that doesn't support svg.

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