Build a Star Rating component

Question

Accepted Answer

A **star rating** tests four things at once: separating **hover preview from the committed value**, the **half-star geometry**, **partial-fill rendering**, and a clean **controlled, accessible component**.

### The mental model

Keep **two** numbers: `value` (committed, set on click) and `hover` (transient preview). Render from **`hover || value`** — that one rule avoids the flicker bugs.

~~~jsx
const [value, setValue] = useState(0);
const [hover, setHover] = useState(0);
const active = hover || value;
~~~

### Step 1 — Half-star geometry

Compare the pointer X against the star's box: left half → `x.5`, right half → whole.

~~~jsx
function ratingFromEvent(e, i) {
  if (precision === 1) return i + 1;
  const rect = e.currentTarget.getBoundingClientRect();
  const isLeftHalf = e.clientX - rect.left < rect.width / 2;
  return i + (isLeftHalf ? 0.5 : 1);
}
~~~

### Step 2 — Rendering a partial star

Stack two stars — a gray one and a gold one clipped to the fill fraction.

~~~jsx
const fi

Build a Star Rating component

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)