Star-rating-react-component NPM

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.