Numeric stepper component in a modern React application interface

Stepping Up Your React Game with @anatoliygatt/numeric-stepper

The Gray Cat
The Gray Cat

@anatoliygatt/numeric-stepper is a powerful React component that brings precision and style to numeric input fields. This library offers a sleek, customizable solution for applications requiring fine-tuned numeric control, from e-commerce quantity selectors to data input forms.

Elevating Numeric Input

The numeric stepper component provides an intuitive interface for users to increment or decrement values with ease. Its design is inspired by Ehsan Rahimi’s “Tally Counter Micro-Interaction” Dribbble shot, offering a visually appealing and interactive experience.

Key Features

  • Customizable Range: Set minimum and maximum values to constrain input within specific bounds.
  • Adjustable Step Size: Define custom step increments for precise control.
  • Responsive Sizing: Choose from three predefined sizes to fit your layout perfectly.
  • Rich Styling Options: Customize colors for various component states and elements.
  • Accessibility Support: Enhance usability with ARIA labels for screen readers.

Getting Started

To incorporate the numeric stepper into your React project, start by installing the necessary dependencies:

npm install @anatoliygatt/numeric-stepper @emotion/react @emotion/styled framer-motion

Basic Implementation

Here’s a simple example of how to use the NumericStepper component:

import { useState } from 'react';
import { NumericStepper } from '@anatoliygatt/numeric-stepper';

function Example() {
  const [value, setValue] = useState(20);

  return (
    <NumericStepper
      minimumValue={10}
      maximumValue={100}
      stepValue={10}
      initialValue={20}
      size="lg"
      onChange={(value) => setValue(value)}
    />
  );
}

This code creates a numeric stepper with a range of 10 to 100, stepping by 10, and an initial value of 20. The large size ("lg") is used for better visibility.

Customizing Appearance

The NumericStepper component offers extensive styling options. Here’s an example with custom colors:

<NumericStepper
  inactiveTrackColor="#fed7aa"
  activeTrackColor="#fddec0"
  activeButtonColor="#ffedd5"
  inactiveIconColor="#fb923c"
  hoverIconColor="#ea580c"
  activeIconColor="#9a3412"
  disabledIconColor="#fdba74"
  thumbColor="#f97316"
  focusRingColor="#fff7ed"
  // ... other props
/>

This configuration creates a warm, orange-themed stepper that can seamlessly integrate into designs with earthy or autumn color schemes.

Advanced Usage: Controlled Component

For more complex scenarios, you might want to fully control the component’s state:

function ControlledExample() {
  const [value, setValue] = useState(50);

  return (
    <NumericStepper
      minimumValue={0}
      maximumValue={100}
      stepValue={5}
      value={value}
      onChange={(newValue) => {
        setValue(newValue);
        console.log(`New value: ${newValue}`);
      }}
    />
  );
}

This setup allows you to manage the stepper’s value externally, useful for form validation or when the value needs to be synchronized with other components.

Enhancing Accessibility

To make your numeric stepper more accessible, utilize the ARIA label props:

<NumericStepper
  decrementButtonAriaLabel="Decrease quantity"
  incrementButtonAriaLabel="Increase quantity"
  thumbAriaLabel={`Current quantity: ${value}`}
  // ... other props
/>

These labels provide context for screen reader users, significantly improving the component’s usability for all.

Styling with CSS

While the component offers extensive prop-based styling, you can further customize its appearance using CSS:

[data-testid='numeric-stepper-thumb'] {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

This CSS snippet changes the font of the thumb label, adding a subtle text shadow for depth.

Conclusion

The @anatoliygatt/numeric-stepper library offers a robust solution for implementing precise numeric inputs in React applications. Its blend of functionality, customizability, and accessibility makes it an excellent choice for developers looking to enhance their UI with a polished numeric control component.

By leveraging this library, you can significantly improve user interaction in scenarios requiring numeric input, from quantity selectors in e-commerce platforms to data entry forms in analytics dashboards. The component’s flexibility allows it to seamlessly integrate into various design systems, making it a valuable addition to any React developer’s toolkit.

For more React UI component insights, check out our articles on Mastering React Datepicker and Elevating UI with React Aria. These resources can help you further enhance your React applications with powerful, user-friendly components.

Comments