stars-rating-react-hooks ⭐️

React Rating Stars - Customizable and headless hooks.

See Website and demos

---

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 = {
    totalStars: 5,
    initialSelectedValue: 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" />
    )
  };

     <StarsRating config={config}
       onStarsRated={(value) => {
        alert(`${value} stars rated`);
      }}
      onSelecting={(isSelecting, selectingValue) => {
        console.log(isSelecting, selectingValue)
      }} 
    />

    return  <StarsRating config={config} />

}

export default Example

Usage (Customizable and Headless)

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

const config = {
    totalStars: 5,
    initialSelectedValue: 2,
    renderFull: '★',
    renderEmpty: '☆',
  };

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

             <span
              {...getStarWrapperProps({
                style: {
                  cursor: 'pointer',
                  display: 'inline-block'
                },
              })}
            >
              {stars?.map((star, i) => (
                <span
                  key={i}
                  {...getStarProps(i, {
                    style: {
                      fontSize: '40px',
                      display: 'inline-block'
                    },
                    onClick: (event, ratedValue) => {
                      console.log(`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