https://github.com/bunlong/react-star
A tiny star rating component with custom icons for React.
https://github.com/bunlong/react-star
rating react react-component react-rating reactjs star star-rating
Last synced: about 1 year ago
JSON representation
A tiny star rating component with custom icons for React.
- Host: GitHub
- URL: https://github.com/bunlong/react-star
- Owner: Bunlong
- License: mit
- Created: 2021-01-16T14:31:44.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-04T06:27:35.000Z (about 5 years ago)
- Last Synced: 2024-12-20T13:26:03.665Z (over 1 year ago)
- Topics: rating, react, react-component, react-rating, reactjs, star, star-rating
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-star-1wexv
- Size: 89.8 KB
- Stars: 9
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
⭐️ Please support us by giving a star! Thanks! ⭐️
# react-star
A tiny star rating component with custom icons for React.
## 🎁 Features
* Easy to use
* Compatible with both JavaScript and TypeScript
## 🔧 Install
react-star is available on npm. It can be installed with the following command:
```
npm install react-star --save
```
react-star is available on yarn as well. It can be installed with the following command:
```
yarn add react-star
```
## 💡 Usage
```jsx
import React from 'react';
import { Star } from 'react-star';
class App extends React.Component {
render() {
return (
console.log(value)}
/>
);
}
};
export default App;
```
## 📖 APIs
Props
Type
Default
Description
defaultValue
number
0
The default value. Use when the component is not controlled.
shape
'thin' | 'fat'
'thin'
The shape of the star.
fraction
number
1
The number of equal subdivisions that can be selected as a rating in each icon, example, for a fractions value of 2, you will be able to select a rating with a precision of down to half a icon.
readOnly
boolean
false
Removes all hover effects and pointer events.
min
number
0
Minimum star.
max
number
5
Maximum star.
## 🔰 Callbacks
Callback
Type
Description
onChange
(value) => {}
The onChange props fires the moment when the value of the element is changed.
onClick
(value) => {}
The onclick props fires on a mouse click on the element.
onHover
(value) => {}
The onHover event occurs when the mouse pointer is moved onto an element.
## ❗ Issues
If you think any of the `react-star` can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
## 🌟 Contribution
We'd love to have your helping hand on contributions to `react-star` by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
How to contribute:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback
## ✨ Contributors
## ⚖️ License
The MIT License [](https://opensource.org/licenses/MIT)
