Simple Modern Numeric Stepper Component For React

A simple numeric stepper component for React-based applications that renders a number component using increment and decrement buttons.

Basic usage:

1. Installation.

# NPM
$ npm i @anatoliygatt/numeric-stepper @emotion/react @emotion/styled framer-motion

2. Import the Numeric Stepper Component.

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

3. Create a basic numeric stepper.

// app.jsx
export function App() {
  const [, setValue] = useState(0);
  return (
    <div className="App">
      <NumericStepper
        size="lg"
        onChange={(value) => {
          setValue(value);
        }}
      />
    </div>
  );
}

4. Possible component props.

minimumValue = 0,
maximumValue = Number.MAX_SAFE_INTEGER,
stepValue = 1,
initialValue = minimumValue,
onChange,
size = 'sm',
inactiveTrackColor = '#2b2b2b',
activeTrackColor = '#1f1f1f',
hoverButtonColor = 'transparent',
activeButtonColor = '#ececec',
inactiveIconColor = '#858585',
hoverIconColor = '#ffffff',
activeIconColor = '#000000',
disabledIconColor = '#383838',
thumbColor = '#444444',
thumbLabelColor = '#ffffff',
thumbShadowAnimationOnTrackHoverEnabled = true,
focusRingColor = '#ececec',
decrementButtonAriaLabel,
thumbAriaLabel,
incrementButtonAriaLabel,

Preview:

Download Details:

Author: anatoliygatt

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/anatoliygatt/numeric-stepper

License: MIT