Quantity Selector Component

Build a React component that provides an intuitive quantity selector with mouse-based interaction features for an e-commerce product page.

Requirements

The component should allow users to adjust a quantity value using mouse interactions:

• Display the current quantity value in a numeric input field
• Provide increment and decrement buttons for adjusting the quantity
• Support click interactions on buttons to change the value by a defined step amount
• Support long-press interactions on buttons for continuous value changes
• Default step should be 1
• When holding down a button (long press), values should change continuously
• Enforce a minimum value of 1
• Enforce a maximum value of 100
• Start with a default value of 1

Test Cases

• Clicking the increment button once increases quantity from 1 to 2 @test
• Clicking the decrement button once decreases quantity from 5 to 4 @test
• Simulating a long press on the increment button continuously increases the value @test
• The value does not go below 1 when decrementing @test

Implementation

@generates

API

import React from 'react';

export interface QuantitySelectorProps {
  /** Current quantity value */
  value?: number;
  /** Default quantity value */
  defaultValue?: number;
  /** Callback when quantity changes */
  onChange?: (value: number | null) => void;
  /** Minimum allowed quantity */
  min?: number;
  /** Maximum allowed quantity */
  max?: number;
  /** Step increment/decrement amount */
  step?: number;
}

export const QuantitySelector: React.FC<QuantitySelectorProps>;

Dependencies { .dependencies }

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

Provides numeric input with step controls and mouse interaction support.

@satisfied-by