⭐️ Please support us by giving a star! Thanks! ⭐️
A tiny star rating component with custom icons for React.
- Easy to use
- Compatible with both JavaScript and TypeScript
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
import React from 'react';
import { Star } from 'react-star';
class App extends React.Component {
render() {
return (
<Star
onChange={(value) => console.log(value)}
/>
);
}
};
export default App;| 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. |
| 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. |
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.
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
Bunlong |
The MIT License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent