Description:
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:
