# react-five-star-rating

> Simple React component that returns an array of STARS based on the input rating value(eg. 3.4)

Latest version **1.1.5** (published 2023-09-25) · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2023-09-25 |
| First published | 2023-09-25 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 45.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ram1117 |
| Keywords | React, star rating, ratings |

## Links

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

## 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.1.5 (latest) — 2023-09-25
- 1.1.4 — 2023-09-25
- 1.1.3 — 2023-09-25
- 1.1.1 — 2023-09-25
- 1.1.0 — 2023-09-25
- 1.0.7 — 2023-09-25
- 1.0.6 — 2023-09-25
- 1.0.5 — 2023-09-25
- 1.0.4 — 2023-09-25
- 1.0.3 — 2023-09-25
- 1.0.2 — 2023-09-25
- 1.0.1 — 2023-09-25
- 1.0.0 — 2023-09-25

## README

# React Five Star Rating

Simple React component that returns an array of STARS based on the input rating value(eg. 3.4)

## Description

Steps to use the package.

1. Install the package from npm registry using the following command.

```
npm i react-five-star-rating
```

2. Import the StarRatings Component in your React component.

```
import StarRatings from 'react-five-star-rating';
```

3. Use the Star Rating component by passing a Decimal Rating value and a css/Tailwind classname with height and width values for a star

```
<StarRatings
      rating={2.8}          
      containerClassName="star-rating-container"                // CSS/Tailwind classnames for the star container, set height and width
      starFillColor="aqua"                                      // Optional - fill color for the stars, default color is gold
      startStrokeColor="grey"                                   // Optional - Stroke color surrounding the star. default color is black    
      concise                                                   // Optional - When true, shows only the necessary number of stars for rating  
    />
```

4. Star rating with default options

![Image with default props](/readme-resources/image2.png)

5. Optional props

  * containerStyle - style object for the star's wrapper
  * starClassName - css/Tailwind classname that applies to the star SVG
  * starStyle - style object for the star SVG
  * starFillColor - Fill color for the stars. Default color is gold <br>
  ![Image with default props](/readme-resources/image1.png)<br>
  * starStrokeColor - Stroke color for the stars. Default stroke color is black
  * starStrokeWidth - Stroke width for each star in pixels. Default is 0.5px
  * Concise - When true, shows only necessary number of stars required to display the rating (3 stars for a rating of 2.80). When false, five stars will be returned <br>
  ![Image with default props](/readme-resources/image3.png)<br>


## Authors

Ram Kumar Karuppusamy <br>
[Github](https://github.com/ram1117) <br>
[LinkedIn](https://www.linkedin.com/in/ram-kumar-karuppusamy/)

## Version History

* 1.1.4
    * Initial Release - With all the bug fixes and refactoring after publishing

## License

This project is licensed under the [MIT](/LICENSE) License

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