react-star

A tiny star rating component with custom icons for React.

Usage no npm install needed!

<script type="module">
  import reactStar from 'https://cdn.skypack.dev/react-star';
</script>

README

react-star

⭐️ 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

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;

📖 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

⚖️ License

The MIT License License: MIT