https://github.com/leocardoso94/beauty-stars
A simple and beauty star rating for React projects
https://github.com/leocardoso94/beauty-stars
react react-component star-rating star-rating-component typescript
Last synced: about 2 months ago
JSON representation
A simple and beauty star rating for React projects
- Host: GitHub
- URL: https://github.com/leocardoso94/beauty-stars
- Owner: Leocardoso94
- License: mit
- Created: 2019-10-10T21:55:51.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T08:08:22.000Z (over 2 years ago)
- Last Synced: 2025-04-09T12:15:50.935Z (about 2 months ago)
- Topics: react, react-component, star-rating, star-rating-component, typescript
- Language: TypeScript
- Homepage: https://leocardoso94.github.io/beauty-stars/
- Size: 2.53 MB
- Stars: 32
- Watchers: 1
- Forks: 5
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Welcome to beauty-stars 👋
> A simple and beauty star rating for React projects
## Install
```bash
npm install --save beauty-stars
// or
yarn add beauty-stars
```
## Usage
```tsx
import React, { Component } from "react";
import BeautyStars from "beauty-stars";
export default class App extends Component {
state = { value: 0 };
render() {
return (
this.setState({ value })}
/>
);
}
}
```
### API
This a list of props that you can pass down to the component:
| Property | Description | Default value | type |
| -------------------- | ---------------------------------------------------------- | ------------- | -------- |
| `maxStars` | How many total stars you want | 5 | number |
| `value` | Set rating value | 0 | number |
| `editable` | Enable edit | true | boolean |
| `inactiveColor` | Color of inactive star (this supports any CSS valid value) | `#121621` | string |
| `activeColor` | Color of selected or active star | `#FFED76` | string |
| `size` | Size of stars (in px) | `36px` | string |
| `onChange(newValue)` | Will be invoked any time the rating is changed | `undefined` | function |
| `hideInactive` | Will hide inactive stars | `false` | boolean |
| `gap` | Sets the gaps (gutters) between stars | 16px | string | number |
## Author
👤 **Leocardoso94**
- Twitter: [@leocardoso94\_](https://twitter.com/leocardoso94_)
- Github: [@leocardoso94](https://github.com/leocardoso94)
## Show your support
Give a ⭐️ if this project helped you!