Abhay [dot] fun

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 GitHub

The 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.