javascript 43 lines · 8 steps

Building an accessible star rating in React

A controlled star-rating widget that previews on hover while keeping the committed value and screen-reader semantics distinct.

Explained by highlit

React Intermediate controlled-component accessibility state-management event-handling conditional-rendering

1import { useState } from 'react';
2 
3function StarRating({ value = 0, max = 5, onChange, size = 24 }) {
const [hovered, setHovered] = useState(null);
const active = hovered ?? value;
6 
return (
  <div role="radiogroup" aria-label="Rating" style={{ display: 'inline-flex', gap: 4 }}>
    {Array.from({ length: max }, (_, i) => {
      const rating = i + 1;
      const filled = rating <= active;
      return (
        <button
          key={rating}
          type="button"
          role="radio"
          aria-checked={rating === value}
          aria-label={`${rating} star${rating > 1 ? 's' : ''}`}
          onClick={() => onChange?.(rating === value ? 0 : rating)}
          onMouseEnter={() => setHovered(rating)}
          onMouseLeave={() => setHovered(null)}
          onFocus={() => setHovered(rating)}
          onBlur={() => setHovered(null)}
          style={{
            background: 'none',
            border: 'none',
            padding: 0,
            cursor: 'pointer',
            fontSize: size,
            lineHeight: 1,
            color: filled ? '#f5a623' : '#d0d0d0',
            transition: 'color 120ms ease',
          }}
        >
          {filled ? '\u2605' : '\u2606'}
        </button>
      );
    })}
  </div>
);
41}
42 
43export default StarRating;

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Separating transient hover state from the committed value lets you preview without mutating the source of truth.
2ARIA roles like radiogroup and radio turn a row of buttons into a control assistive tech understands.
3The nullish coalescing operator cleanly falls back to a default only when hover is genuinely absent.

Related explainers

javascript

import { Suspense } from 'react';
import { searchProducts } from '@/lib/products';
import SearchInput from './search-input';

Streaming search results in a Next.js Server Component

server-components suspense streaming

Intermediate 8 steps

javascript

import { notFound } from 'next/navigation'
import { Suspense } from 'react'
import { getPostBySlug, getRelatedPosts } from '@/lib/posts'
import { RelatedPosts } from '@/components/related-posts'

Building a dynamic blog post page in Next.js

server-components dynamic-routing metadata

Intermediate 8 steps

javascript

const express = require('express');
const { createProxyMiddleware, fixRequestBody } = require('http-proxy-middleware');
 
const router = express.Router();

Building an API gateway proxy in Express

reverse-proxy middleware api-gateway

Intermediate 6 steps

typescript

import { Injectable, signal, computed, effect, inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
 
export type Theme = 'light' | 'dark';

A signal-based theme service in Angular

signals reactivity dependency-injection

Intermediate 7 steps

javascript

import { useCallback, useRef, useState } from 'react';
 
export function ColorPicker({ initialColor = '#3b82f6', onCommit }) {
  const [committed, setCommitted] = useState(initialColor);

A validated color picker in React

uncontrolled-inputs refs validation

Intermediate 7 steps

javascript

import { useEffect, useRef } from 'react';
 
export function useRefetchOnFocus(refetch, { staleTime = 30_000 } = {}) {
  const lastFetchedAt = useRef(Date.now());