v5 — The Complete Update

import { RatingBadge } from "star-rating-x";

<RatingBadge value={4.8} count={1247} theme="gold" size="lg"/>
<RatingBadge value={4.3} count={521}  theme="ocean" size="md"/>
<RatingBadge value={3.9}              theme="fire"  size="sm" compact/>
<RatingBadge value={4.1} count={88}   theme="violet" size="xs"/>

import { RatingSummary } from "star-rating-x";

<RatingSummary
  average={4.3}
  total={1317}
  distribution={{ 5:842, 4:321, 3:98, 2:34, 1:22 }}
  reviews={recentReviews}
  showReviews
  onWriteReview={() => openModal()}
  theme="gold"
/>

import { RatingWall } from "star-rating-x";

<RatingWall
  reviews={reviews}
  columns={2}
  maxItems={4}
  showMore
  theme="gold"
  onHelpful={(r) => markHelpful(r.id)}
/>

import { useRatingAnalytics } from "star-rating-x";

const stats = useRatingAnalytics(ratingsArray);
// stats.average         → 4.27
// stats.nps             → 73
// stats.trend           → "improving"
// stats.percentPositive → 77%

<StarRating
  glowEffect
  glowIntensity={0.6}
  value={rating}
  onChange={setRating}
  theme="gold"
  size={34}
/>

<StarRating loading count={5} size={30} />

// Toggle based on data state:
<StarRating loading={isLoading} value={rating} />

<StarRating
  value={rating}
  onChange={setRating}
  allowUndo
  undoTimeout={4000}
  onUndo={(prev) => console.log("Reverted to", prev)}
/>

<StarRating
  onRatingComplete={(v) => submitToAPI(v)}
  debounceMs={600}
  theme="rose"
/>

import { RatingPrompt } from "star-rating-x";

// Trigger after 5 seconds
<RatingPrompt
  trigger="time"
  delay={5000}
  message="Enjoying the app?"
  onRate={(v) => submitRating(v)}
  onDismiss={() => setShow(false)}
  placement="bottom-right"
  theme="gold"
/>