Live Interactive Demo Model
Star Rating with Decimal Half-Stars
A fractional star rating component that detects whether your cursor is over the left or right half of each star.
0
React 19 Practice Workbench
Acceptance Criteria
Using getBoundingClientRect() to calculate cursor position within star width
Clipping SVG star fills cleanly at 50% width
Supporting keyboard fractional ratings via Left/Right arrows
Target APIs & Concepts
BoundingClientRect MathSVG ClipPath / Half-FillsHover Half-Rating
Ready to code this yourself? Switch to the Candidate Code Studio to write your implementation in React 19 and run automated test evaluations!