react-number-steps-input-component

Numeric Input Step component

npm install react-number-steps-input-component

Usage

<NumericStepInput 
    initialValue={45654}
    validate={parseInt}
    format={(val) => {
        var formatter = new Intl.NumberFormat("en-US", {
            style: "currency",
            currency: "USD",
        });
        return formatter.format(val);
    }}
    stepping={{
        size: 500,
        snap: true
    }}
    clearOnFocus
    onChanged={(val) => console.log("New Value", val)}
    renderDecrementButtonComponent={(props) => <button {...props}>-</button>}
    renderInputComponent={(props) => <input {...props} />}
    renderIncrementButtonComponent={(props) =>(props) => <button {...props}>+</button>} />

Property	Description
initialValue	The initial value for the input. After the value is passed, the component handles the state internally. If you want to change it from the outside, set the key for the component to indicate you want a new instance.
validate	Parses and validates the input as it is received. Per default, this is done for the range of integers. If you want for instance support floating point numbers, adjust the validator to your usecase
format	The formatter will be applied when the user is not in the field, and display a formatted representation of the number
stepping	The increment/decrement behavior can be set via this property. For details see the number-steps library
clearOnFocus	If set (thus true), will clear the input field if the user clicks inside
onChanged	Is triggered when the value in the input was changed. The format is { value: number, formattedValue : string }. Will be triggered only once the change is applied, i.e. not for every single character that is typed.
renderDecrementButtonComponent / renderIncrementButtonComponent	Per default, the increment/decrement is a button element. You can also set your own, but it should inherit the properties of a button as this component expects them.
renderInputComponent	Per default, the increment/decrement is an input element. You can also set your own, but it should inherit the properties of an input as this component expects them.

See it in use in the storybook here: https://matthiaskainer.github.io/react-number-steps-input-component/?path=/story/numericstepinput--heavinly-customized