@mshafiqyajid/react-rating

npm install @mshafiqyajid/react-rating

import { RatingStyled } from "@mshafiqyajid/react-rating/styled";
import "@mshafiqyajid/react-rating/styles.css";

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

<RatingStyled
  count={5}
  value={value}
  onChange={setValue}
  showValue
/>

<RatingStyled
  count={5}
  value={4.5}
  readOnly
  showValue
  label="Average rating"
/>

<RatingStyled
  count={5}
  tone="danger"
  icon={<HeartIcon />}
  defaultValue={3}
/>

<RatingStyled
  count={5}
  defaultValue={0}
  onChange={async (next) => {
    await fetch("/api/reviews", {
      method: "POST",
      body: JSON.stringify({ stars: next }),
    });
  }}
/>

const labels = ["Terrible", "Poor", "OK", "Good", "Great"];
const [hovered, setHovered] = useState<number | null>(null);

<>
  <RatingStyled
    count={5}
    value={value}
    onChange={setValue}
    onHover={setHovered}
  />
  <span>{labels[Math.ceil((hovered ?? value) - 1)] ?? ""}</span>
</>

import { useRating } from "@mshafiqyajid/react-rating";

const { items, rootProps, value, displayValue } = useRating({
  count: 5,
  defaultValue: 3,
  allowHalf: true,
});

return (
  <div {...rootProps} className="rate">
    {items.map((item) => (
      <span key={item.index} {...item.itemProps} data-fill={item.fill}>
        {item.fill === 1 ? "★" : "☆"}
      </span>
    ))}
    <span>{displayValue} / 5</span>
  </div>
);