star-rating-react-component

Custom Star Rating System

A simple Star Rating System React Component, highly customizable and easy to use!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
  • Built With
• Getting Started
• Usage
• License
• Contact
• Acknowledgements

About The Project

This is a Star Rating System Component for React that renders a Star Rating graphical interface. The generator is highly customizable, and lets you choose everything, colors, size, number of stars, etc... More info on Usage in the proper Section. It weighs 4kB.

Built With

• React Hooks

Getting Started

You can use this Component with:

npm install -s star-rating-react-component

Peer deps:

• react
• react-dom

Usage

• This is the most basic way to import the Component:

import React from 'react';
import Star from 'star-rating-react-component'; 

 function App(){ 
return (
    <>
     <Star/>
    </> 
     )
}

Props:

If you pass no props, it will have the default props:

let defaultProps = {
  options: {
    name: 'half-grad',
    numOfStars: 5,
    starsWidth: 30,
    color: "green",
    bgColor: "white",
    borderColor: "green",
    scoreColor: "inherit"
  },
  handleScore: (score) => { console.log(score) }
}

The best way to customize the Component is to declare a custom options object and an handleScore callback fired on click event:

import React from 'react';
import Star from 'star-rating-react-component'; 

let options = {
  name: 'custom',
  numOfStars: 5,
  starsWidth: 40,
  color: "#ffffff",
  bgColor: " #e6e6e6",
  borderColor: "orange",
  scoreColor: "inherit"
}

 function App(){ 

   const handleScore = (score) => {
    console.log(score);
 }

return (
    <>
     <Star options={options} handleScore={handleScore}/> 
    </>
     )
}

If you are going to use this component more than once, it's important you set a different name for each one, because the name is used to manage the id of the filling gradient and must be unique.

In case you are rendering multiple Components with map() method, you should do it like this:

{arr.map((x,i) => (
 <Star options={{...options, name:i}}
)}
)

Or if you are rendering it inside a component which itself is rendered multiple times :

     {arr.map((x,i) => (
 <MyComponent options={{...options, name:i}}/>  
)}


function MyComponent({options}){ 
return (
<>
<Star options={options}/>
</> 
)
}

This is necessary to give unique id's to each Component in order to avoid inconsistencies in the hovering effect.

https://react-ifgbpv.stackblitz.io

Roadmap

See the open issues for a list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Cesare Polonara - @CesarePolonara - [e-mail]
NPM : https://www.npmjs.com/package/star-rating-react-component
Demo Link : https://react-ifgbpv.stackblitz.io
Personal Site : http://cesare-polonara.netlify.app/