Custom Counter Component

Build a React counter component with increment and decrement buttons that support auto-repeat functionality when held down.

Requirements

Create a counter component that:

1. Displays a numeric value (starting at 0)
2. Has increment (+) and decrement (-) buttons
3. Implements auto-repeat behavior:
   • First click/press should immediately change the value
   • When button is held down, wait 600ms before starting auto-repeat
   • During auto-repeat, change the value every 200ms
   • Stop repeating when the button is released
4. Supports min and max bounds (e.g., min: 0, max: 100)
5. Disables buttons appropriately when bounds are reached
6. Includes proper accessibility attributes (ARIA roles and labels)

Test Cases

• Clicking the increment button once increases the value from 0 to 1 @test
• Clicking the decrement button once decreases the value from 5 to 4 @test
• Holding the increment button for 1 second increases the value by at least 2 (demonstrating auto-repeat) @test
• When max is 10 and value is 10, the increment button has aria-disabled attribute set to true @test

Implementation

@generates

API

interface CounterProps {
  min?: number;
  max?: number;
  defaultValue?: number;
  onChange?: (value: number) => void;
}

export function Counter(props: CounterProps): React.ReactElement;

Dependencies { .dependencies }

@rc-component/input-number { .dependency }

Provides numeric input component with step controls and auto-repeat functionality.

@satisfied-by