npm install star-rating-xv2.0.0TypeScriptZero deps

⭐ star-rating-x

v2.0 · Custom Icons · Emoji Mode · Mount Animation · Group Rating

Click · Hover · Keyboard ← →

01

Character Mode — Emoji & Text

New in v2Emoji Rating
😊😊😊😊😊Not rated yet
<StarRating
  character="😊"
  count={5}
  size={40}
  value={rating}
  onChange={setRating}
/>
New in v2Different Emoji per Star (render fn)
⬜⬜⬜⬜⬜Hover over an emoji!
const emojis = ["😡","😕","😐","😊","🤩"];

<StarRating
  character={({ index, fill }) =>
    fill > 0 ? emojis[index] : "⬜"
  }
  count={5}
  size={40}
/>
New in v2Text Characters
✦✦✦✦✦AAAAA♪♪♪♪♪
<StarRating character="✦" theme="violet" defaultValue={4} readOnly />
<StarRating character="A" theme="ocean"  defaultValue={3} readOnly />
<StarRating character="♪" theme="rose"   defaultValue={5} readOnly />
02

Custom SVG Icon

New in v2Custom SVG Path String
const pinPath = "M12 2C8 2 4 6 4 10c0 5 8 12 8 12s8-7 8-12c0-4-4-8-8-8zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z";

<StarRating
  customIcon={pinPath}
  theme="fire"
  value={rating}
  onChange={setRating}
/>
New in v2Custom Render Function (full control)
★★★★☆
<StarRating
  customIcon={({ fill, fillColor, size }) => (
    <svg viewBox="0 0 24 24" width={size} height={size}>
      <circle cx="12" cy="12" r="10" fill={fillColor} />
      <text x="12" y="16" textAnchor="middle"
        fontSize="10" fill="#fff">
        {fill > 0 ? "★" : "☆"}
      </text>
    </svg>
  )}
  theme="ocean"
/>
03

Mount Animation (Count-up)

New in v2Stars fill up on first render
<StarRating
  value={4}
  mountAnimation
  mountDuration={800}
  readOnly
  showValue
  theme="sunset"
/>
New in v2Different durations
400ms
1000ms
1600ms
<StarRating value={5} mountAnimation mountDuration={400}  theme="mint"   readOnly />
<StarRating value={4} mountAnimation mountDuration={1000} theme="ocean"  readOnly />
<StarRating value={3} mountAnimation mountDuration={1600} theme="rose"   readOnly />
04

Group Rating — Multiple Categories

New in v2Restaurant Review
Food Quality
Service
Value
Atmosphere
Overall
import { RatingGroup } from "star-rating-x";

<RatingGroup
  categories={[
    { key: "quality",    label: "Food Quality" },
    { key: "service",    label: "Service" },
    { key: "value",      label: "Value" },
    { key: "atmosphere", label: "Atmosphere" },
  ]}
  values={ratings}
  onChange={(key, val, all) => setRatings(all)}
  showAverage
  showValues
  theme="gold"
/>
New in v2Product Review — Read Only
Display
Battery
Camera
Software
Overall
<RatingGroup
  categories={[
    { key: "display",  label: "Display" },
    { key: "battery",  label: "Battery" },
    { key: "camera",   label: "Camera" },
    { key: "software", label: "Software" },
  ]}
  defaultValues={{ display:5, battery:4, camera:5, software:3 }}
  showAverage
  readOnly
  theme="ocean"
/>

star-rating-x v2.0

MIT · Abdelrahman Ayman

npmGitHub