Image Rating React

A simple React image rating that helps you add your own custom star image.

Install

In the project directory, you can run:

npm

npm install image-rating-react

yarn

yarn add image-rating-react

Usage

import logo from './logo.svg';
import React, { useState } from "react";
import ImageRating from "react-image-rating";
// Import your empty and filled stars
import emptyStar from "./assets/star.png";
import filledStar from "./assets/star-filled.png";

function YourComponent() {
    const [value, setValue] = useState(0);

    const handleCallback = (childData) => {
        setValue(childData);
    }

    return (
        <div className="stars">
            <ImageRating values={ handleCallback } starCount={5} emptyStar={emptyStar} filledStar={filledStar} className="star" />
            // Remove this value below during production
            { value }
        </div>
    );
}

export default YourComponent;

Props

| Props | Description | | ----------- | ----------- | | starCount | This is the number of stars your want. | | emptyStar | The image path of your empty Star | | filledStar | The image path of your filled Star | | className | ClassName to style the component the way your want | | values | This is callback function that returns the value of the star selected. See example above on how to use. |

License

MIT celebritydeveloper