Necessitates Proper Modularity

    star-rating-react-component

    3.2.1 • Public • Published

    Contributors Forks Stargazers Issues MIT License LinkedIn


    Logo Logo Logo Logo Logo

    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

    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

    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 - cesare.polonara@gmail.com
    NPM : https://www.npmjs.com/package/star-rating-react-component
    Demo Link : https://react-ifgbpv.stackblitz.io
    Personal Site : http://cesare-polonara.netlify.app/

    Install

    npm i star-rating-react-component

    DownloadsWeekly Downloads

    0

    Version

    3.2.1

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • kais3rp