A fractional star rating component that detects whether your cursor is over the left or right half of each star.
BoundingClientRect MathSVG ClipPath / Half-FillsHover Half-Rating
Task 72 of 100
🌟
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.Live Component StateActive
React 19 Practice Workbench
Counter: 0Range: 50%
State Mutation
Toggle Mode
Adjust Slider:50%
Project Source Code & Architecture
Live codebase with modular file hierarchy and TypeScript implementations.