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