stars-rating-react-hooks

stars-rating-react-hooks ⭐️

React Rating Stars - Customizable and headless hooks.

---

Install

npm install --save stars-rating-react-hooks

Usage (Basic)

import React from 'react'

import { StarsRating } from "stars-rating-react-hooks";

function Example() {

  const config = {
    number: 5,
    value: 4.5,
    renderFull: (
      <img src="https://img.icons8.com/ios-filled/50/000000/star--v1.png" />
    ),
    renderEmpty: (
      <img src="https://img.icons8.com/ios/50/000000/star--v1.png" />
    ),
    renderHalf: (
      <img src="https://img.icons8.com/ios-filled/50/000000/star-half-empty.png" />
    )
  };



    return  <StarsRating config={config} />

}

export default Example

Usage (Customizable and Headless)

import { useStars } from 'stars-rating-react-hooks'

const config = {
    number: 5,
    value: 2,
    renderFull: '★',
    renderEmpty: '☆',
  };

const {
    stars,
    getStarProps,
    getStarWrapperProps,
    isSelecting,
    selectingValue,
    selectedValue,
  } = useStars(config);

        <span
            {...getStarWrapperProps({
              style: {
                cursor: 'pointer',
              },
            })}
          >
               {stars?.map((star, i) => (
                    <span
                      key={i}
                      {...getStarProps(i, {
                        style: {
                          fontSize: '40px',
                        },
                        onClick: (event , ratedValue ) => {
                          alert(`You just rated ${ratedValue} Stars!!`);
                        },
                      })}
                    >
                      {star}
                    </span>
                  ))}
       </span>

'getStarWrapperProps' and 'getStarProps' are prop getters, More info on prop getters

Demo:

Basic

Open Basic codesandbox

Customizable and Headless:

Open Customizable codesandbox

License

MIT © 07harish