Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/awran5/react-simple-star-rating
A simple react component for adding a star rating to your project.
https://github.com/awran5/react-simple-star-rating
react react-library react-typescript star-rating
Last synced: 9 days ago
JSON representation
A simple react component for adding a star rating to your project.
- Host: GitHub
- URL: https://github.com/awran5/react-simple-star-rating
- Owner: awran5
- License: mit
- Created: 2020-10-31T08:47:05.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-03T08:14:35.000Z (over 1 year ago)
- Last Synced: 2024-01-10T12:09:32.550Z (10 months ago)
- Topics: react, react-library, react-typescript, star-rating
- Language: TypeScript
- Homepage: https://react-simple-star-rating.vercel.app/
- Size: 1.44 MB
- Stars: 122
- Watchers: 2
- Forks: 28
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Simple Rating
> A simple react component for adding a star rating to your project.
[](https://www.npmjs.com/package/react-simple-star-rating) [](https://standardjs.com)
## Install
#### npm
```sh
npm i react-simple-star-rating
```
#### Yarn
```sh
yarn add react-simple-star-rating
```
## Usage
```jsx
import React, { useState } from 'react'
import { Rating } from 'react-simple-star-rating'
export function MyComponent() {
const [rating, setRating] = useState(0)
// Catch Rating value
const handleRating = (rate: number) => {
setRating(rate)
// other logic
}
// Optinal callback functions
const onPointerEnter = () => console.log('Enter')
const onPointerLeave = () => console.log('Leave')
const onPointerMove = (value: number, index: number) => console.log(value, index)
return (
)
}
```
## Reset Rating Value
```jsx
import React, { useState } from 'react'
import { Rating } from 'react-simple-star-rating'
export function MyComponent() {
const [rating, setRating] = useState(0)
// Catch Rating value
const handleRating = (rate: number) => {
setRating(rate)
}
const handleReset = () => {
// Set the initial value
setRating(0)
}
return (
{/* set initial value */}
reset
)
}
```
### Available Props
| Prop | Type | Options | Description | Default |
| -------------------- | ---------------- | -------- | --------------------------------------------------------- | :------------------------: |
| `onClick` | function | Optional | callback with `hover`, `index` and `event` values passed | `-` |
| `onPointerMove` | function | Optional | callback with `hover`, `index` and `event` values passed | `-` |
| `onPointerEnter` | function | Optional | callback with `event` passed | `-` |
| `onPointerLeave` | function | Optional | callback with `event` passed | `-` |
| `initialValue` | number | Optional | Set initial value | `0` |
| `iconsCount` | number | Optional | Number of the icons | `5` |
| `readonly` | boolean | Optional | Readonly mode | `false` |
| `rtl` | boolean | Optional | RTL mode | `false` |
| `transition` | boolean | Optional | Adds a smooth transition effect on mouse hover | `false` |
| `allowFraction` | boolean | Optional | Enable a fractional icon (half icon) | `false` |
| `className` | string | Optional | Applied to the `main` span | `react-simple-star-rating` |
| `style` | CSSProperties | Optional | Inline style applied to the `main` span | `basic style` |
| `size` | number | Optional | SVG Icon width / height in `px` | `25` |
| `SVGstrokeColor` | string | Optional | SVG Icon stroke color | `currentColor` |
| `SVGstorkeWidth` | string \| number | Optional | SVG Icon storke width | `0` |
| `SVGclassName` | string | Optional | SVG Icon css class | `star-svg` |
| `SVGstyle` | CSSProperties | Optional | SVG inline style | `-` |
| `fillIcon` | ReactNode | Optional | Custom fill icon SVG | `null` |
| `fillColor` | string | Optional | Fill icons color | `#f1a545` |
| `fillColorArray` | array | Optional | Array of string to add color range | `[]` |
| `fillStyle` | CSSProperties | Optional | Inline style applied to `filled` icon span | `basic style` |
| `fillClassName` | string | Optional | Applied to the `filled` icon span | `filled-icons` |
| `emptyIcon` | ReactNode | Optional | Custom empty icon SVG | `null` |
| `emptyColor` | string | Optional | Empty icons color | `#cccccc` |
| `emptyStyle` | CSSProperties | Optional | Inline style applied to `empty` icon span | `basic style` |
| `emptyClassName` | string | Optional | Applied to the `empty` icon span | `empty-icons` |
| `customIcons` | array of object | Optional | Add a group of icons | `[]` |
| `allowHover` | boolean | Optional | Enable / Disable hover effect | `true` |
| `disableFillHover` | boolean | Optional | Enable / Disable hover effect on filled stars | `false` |
| `allowTitleTag` | boolean | Optional | Enable / Disable HTML`title` Tag | `true` |
| `showTooltip` | boolean | Optional | Show a tooltip with live values | `false` |
| `tooltipDefaultText` | string | Optional | Initial tooltip text if no rating value | `Your Rate` |
| `tooltipArray` | array | Optional | Array of strings to show inside tooltip | `[]` |
| `tooltipClassName` | string | Optional | Tooltip CSS class | `rating-tooltip` |
| `tooltipStyle` | CSSProperties | Optional | Inline style applied to the `tooltip` span | `basic style` |
| `titleSeparator` | string | Optional | Separator word in a title of a rating star `(1 out of 5)` | `out of` |
---
## BREAKING CHANGES: version [4.1.0](https://github.com/awran5/react-simple-star-rating/compare/v4.0.5...v4.1.0) (2022-10-03)
| old | new | changes |
| --------------- | --------------- | --------- |
| `allowHalfIcon` | `allowFraction` | `Renamed` |
| `fullIcon` | `fillIcon` | `Renamed` |
| `fullStyle` | `fillStyle` | `Renamed` |
| `fullClassName` | `fillClassName` | `Renamed` |
| `ratingValue` | `-` | `Removed` |
## Demos
See all demos and usage examples [in action](https://react-simple-star-rating.vercel.app/).
[](https://codesandbox.io/s/react-simple-rating-ts-fzmpu?fontsize=14&hidenavigation=1&theme=dark)
### License
MIT © [awran5](https://github.com/awran5/)