NumberInput React Component Documentation
Open Source
The code for the NumberInput component is open-sourced. You can view, use, and contribute to the code on GitHub.
View the NumberInput Component on GitHubThe NumberInput component is a versatile and customizable input component for numerical values. It provides a user-friendly interface for incrementing or decrementing a number value within a specified range.
Props
The NumberInput component accepts the following props:
- value: The current value of the input.
- onChange: A function that is called when the value changes.
- maxValue: The maximum value that the input can have. Defaults to Number.MAX_VALUE.
- minValue: The minimum value that the input can have. Defaults to Number.NEGATIVE_INFINITY.
- minChange: The minimum change in value when the increment/decrement button is clicked. Defaults to 1.
- maxChange: The maximum change in value when the increment/decrement button is clicked. Defaults to 20.
- fPrecision: The precision of the floating-point number. Defaults to 0.
Examples
Example 1: Using minValue and maxValue
In this example, the NumberInput component is set with a minimum value of -10 and a maximum value of 400.
Example 2: Using minChange, maxChange, and fPrecision
In this example, the NumberInput component is set with a minimum change of .1, a maximum change of 5, and a floating-point precision of 1.