Star Rating

Yangshun TayEx-Meta Staff Engineer
Languages

Create a star rating widget that allows users to select a rating value.

Requirements

  • The widget accepts two parameters: the maximum number of stars and the number of currently filled stars.
  • When a star is clicked, it is filled along with all the stars to its left.
  • Hovering over a star fills that star and all stars to its left.
    • The stars which need to be filled during hover take priority over existing filled state.
    • If the cursor leaves the widget and no new selection is made, the appropriate stars revert to the filled state before the hovering.
  • Make the star rating widget reusable such that multiple instances can be rendered within the same page.

The star icons, both empty and filled, are provided to you as SVGs.

A StarRating.js skeleton component has been created for you. You are free to decide the props of <StarRating />.

Asked at these companies

Premium featurePurchase premium to see companies which ask this question.
View plans

Code Editor

Start coding your solution here

Loading editor

Browser preview and Console

Test and preview your UI in real time
For the best experience, switch to desktop.