# react-rating-star-with-type

> This simple react rating star component with typescript support made by Ziaul Hoque Founder of Revuers.com

Latest version **1.2.2** (published 2023-12-31) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2023-12-31 |
| First published | 2023-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Ziaul Hoque |
| Maintainers | ziaulhoque24 |
| Keywords | react, javascript, typescript |

## Links

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

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [typescript](https://npm.io/package/typescript.md) ^5.1.3

## 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.2.2 (latest) — 2023-12-31
- 1.2.1 — 2023-08-13
- 1.2.0 — 2023-06-18
- 1.1.1 — 2023-06-17
- 1.1.0 — 2023-06-17
- 1.0.8 — 2023-06-16
- 1.0.7 — 2023-06-16
- 1.0.6 — 2023-06-16
- 1.0.5 — 2023-06-16
- 1.0.4 — 2023-06-16
- 1.0.3 — 2023-06-16
- 1.0.2 — 2023-06-16
- 1.0.1 — 2023-06-16
- 1.0.0 — 2023-06-16

## README

# react-stars :star:
###### A simple star rating component for your React projects

![React Rating stars](http://i.imgur.com/VDbzbqF.gif)

### Get started quickly

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

###### Install react-stars package with Yarn:
`yarn add react-rating-star-with-type`

Then in your project include the component:

```javascript
import { useState } from "react";
import ReactStars from 'react-rating-star-with-type'

export default function app(){
    const [star, setStar] = useState(5);

    const onChange=(nextValue)=>{
        setStar(nextValue)
    }
    
    return <ReactStars 
    onChange={onChange} 
    value={4.2}  
    isEdit={true}  
    activeColors={[ "red", "orange", "#FFCE00", "#9177FF","#8568FC",]} 
    />
}




```
### API

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

| Property | Description | Default value | type |
| -------- | ----------- | ------------- | ---- |
| `className`  | Name of wrapper class | `""` | string |
| `count`  | How many total stars you want  | 5 | number |
| `value`  | Set rating value  | 0 | number |
| `emptyIcon` | Which character you want to use as a star | `(react-icons)` | ReactNode |
| `halfIcon` | Which character you want to use as a half star | `(react-icons)` | ReactNode |
| `filledIcon` | Which character you want to use as a active star | `(react-icons)` | ReactNode |
| `inactiveColor` | Color of inactive star | `#808080` | string |
| `activeColors` | Colors of active star (depend of value) | `[]` | String[] |
| `activeColor` | Color of selected or active star | `#FED900` | string |
| `size` | Size of stars (if provide string you must mention unit , for example: "1rem" ) | `14` | number or String |
| `style` | style object for component wrapper | `{}` | object |
| `isEdit` | Should you be able to select rating or just see rating (for reusability) | `false` | boolean |
| `isHalf` | isHalf true means you can select half star (make sure isEdit true if you set isHalf true) | `false` | boolean |
| `valueShow` | Should component use valueShow, if need Rating show with stars | `false` | boolean
| `onChange(new_rating)` | Will be invoked any time the rating is changed | `undefined` | function |

### Help improve the component
Hit star on gitHub - [https://github.com/ziaulhoque24/react-rating-star-with-type](https://github.com/ziaulhoque24/react-rating-star-with-type)

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

It also works perfectly with next js in client components. with the server component, you may get an error!

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