v4.0.0Gradient FillCompare ModeConfetti ๐ŸŽ‰overallLabel

v4 โ€” Visual Upgrade

Gradient fill ยท Compare mode ยท Confetti ยท overallLabel ยท dividerColor

01

filledGradient

v4Preset gradient themes
<StarRating
  filledGradient={["#FBBF24","#F97316","#EF4444"]}
  gradientDirection="horizontal"
  value={rating}
  onChange={setRating}
/>
v4gradientDirection
// "horizontal" | "vertical" | "diagonal"
<StarRating
  filledGradient={["#38BDF8","#6366F1"]}
  gradientDirection="diagonal"
/>
02

compareValue โ€” Ghost Rating

v4Your rating vs community average

Ghost stars show 4.2 avg behind your rating

<StarRating
  value={myRating}
  onChange={setMyRating}
  compareValue={4.2}
  compareLabel="community avg"
  theme="ocean"
  showValue
/>
03

celebrateOnMax ๐ŸŽ‰

v4Confetti burst on 5 stars

Click the 5th star! ๐ŸŽ‰

<StarRating
  celebrateOnMax
  confettiColors={["#FBBF24","#F97316","#EC4899","#8B5CF6"]}
  value={rating}
  onChange={setRating}
  animation="pop"
/>
04

RatingGroup โ€” overallLabel & dividerColor

v4Customise the average row
Quality
Service
Value
Overall
<RatingGroup
  categories={categories}
  overallLabel="ุฅุฌู…ุงู„ูŠ"       // any language
  dividerColor="#7c3aed"
  averageLabelStyle={{ color:"#a78bfa", fontStyle:"italic" }}
  showAverage
  showValues
/>

star-rating-x v4

MIT ยท Abdelrahman Ayman

v5 โœจnpmGitHub