Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:
Expose the current light with an accessible label and polite live announcement, and hide the purely visual lights from assistive technology.
You are free to exercise your creativity to style the appearance of the traffic light.
1import { useEffect, useState } from 'react';23function Light({ backgroundColor }) {4 return (5 <div6 aria-hidden={true}7 className="traffic-light"8 style={{ backgroundColor }}9 />10 );11}1213export default function TrafficLight({14 initialColor = 'green',15 config,16 layout = 'vertical',17}) {18 const [currentColor, setCurrentColor] = useState(initialColor);1920 useEffect(() => {21 const { duration, next } = config[currentColor];2223 const timerId = setTimeout(() => {24 setCurrentColor(next);25 }, duration);2627 return () => {28 clearTimeout(timerId);29 };30 }, [currentColor]);3132 return (33 <div34 aria-live="polite"35 aria-label={`Current light: ${currentColor}`}36 className={[37 'traffic-light-container',38 layout === 'vertical' && 'traffic-light-container--vertical',39 ]40 .filter((cls) => !!cls)41 .join(' ')}>42 {Object.keys(config).map((color) => (43 <Light44 key={color}45 backgroundColor={46 color === currentColor ? config[color].backgroundColor : undefined47 }48 />49 ))}50 </div>51 );52}
Traffic lights are simple state machines where each color is a state and each state is shown for a fixed duration before moving to the next. We can capture the state information (how long to remain in each color and which color to transition to) using a simple JavaScript object:
const config = {red: {duration: 4000,next: 'green',},yellow: {duration: 500,next: 'red',},green: {duration: 3000,next: 'yellow',},};
The next field makes the component a timed state machine.
Within the TrafficLight component, we only need a single state variable, which is the current color. We also set a timer via setTimeout to transition to the next color by looking up the config object to know what the next color is and when to do so. Do remember to clear the timer when the component unmounts to prevent "setState on unmounted component" errors and memory leaks.
The rendering of this component is straightforward and can be achieved with Flexbox. With Flexbox, it's also easy to change the layout of the lights from a vertical one to a horizontal one just by changing the flex-direction property.
It's a good practice to make components reusable by allowing customization of:
We also define the color of each light within the config object so that the TrafficLight component is both state and color agnostic. It's even possible to create two-color and four-color traffic lights just by modifying the config object without having to modify the TrafficLight component's implementation.
For a11y reasons, we add an aria-label to the component to indicate the current light and aria-live="polite" to announce the current active light. The contents of the component (the lights) are for visual purposes and aren't important to screen readers; they can be hidden with aria-hidden="true".
console.log() statements will appear here.