# react-dynamic-star

> Single component to generate dynamic star svg

Latest version **1.0.1** (published 2024-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dynamic-star
pnpm add react-dynamic-star
yarn add react-dynamic-star
bun add react-dynamic-star
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-11-16 |
| First published | 2021-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Igor Wessel |
| Maintainers | igorwessel |
| Keywords | react dynamic star, react star rating |

## Links

- npm: https://www.npmjs.com/package/react-dynamic-star
- Repository: https://github.com/igorwessel/react-dynamic-star
- Issues: https://github.com/igorwessel/react-dynamic-star/issues
- npm.io page: https://npm.io/package/react-dynamic-star

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2024-11-16
- 1.0.0 — 2024-11-16
- 0.0.2 — 2022-02-10
- 0.0.1 — 2021-10-24

## README

# React Dynamic Star

A Highly Customizable, easy-to-use elegant stars rating component.
This component is a port of an open-source component made in vue, you can access the repo in **[Vue Star Rating](https://github.com/JonathanDn/vue-stars-rating)**.

# Demo

![Full](https://github.com/igorwessel/react-dynamic-star/blob/main/src/assets/full_dynamic_star.png "Full")

![Outlined](https://github.com/igorwessel/react-dynamic-star/blob/main/src/assets/outlined_dynamic_star.png "Outlined")

[![Edit react-dynamic-star-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-dynamic-star-example-8cvcg?fontsize=14&hidenavigation=1&theme=dark)

# Usage

1. Install via npm or yarn
```sh
yarn add react-dynamic-star

npm install react-dynamic-star
```

2. Import in project
```jsx
import { DynamicStar } from 'react-dynamic-star';
```

3. Use
```jsx
const App = () => { 

    return (
        <div>
            <DynamicStar rating={5} />
        </div>
    )
}
```
# Props

| Property | Type  | Description | Default
| --- | ---  | --- | --- |
| **rating\*** | Number  | A number between 0.0-totalStars that will determine the fullness of the stars rating polygons
| **outlined?** | Boolean, String | Use only outlined, the stroke color will use the fullStarColor, pass the color for he the outlined color will use.
| **outlineWidth?** | Number | The width for outline
| **sharpnessStar?** | Number| Define the sharpness/fatness of a star | 2.5
| **totalStars?** | Number | Define total of stars | 5
| **width?** | Number | Define width of a star | 100
| **height?** | Number | Define height of a star |100
| **emptyStarColor?** | String | Define empty color when star is not filled | transparent
| **fullStarColor?** | String | Define full star color when star is filled | #FFBC00

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