External module "coordinates/react-hooks/number"

Const useNumberInput

• useNumberInput(initValue: number, constraints?: NumericConstraints): [number | null, string, function, string]

• Use numeric input state for a numeric input field where the users text value is unconstrained allowing users to type freely as they actively edit the value only applying numeric constraints when the user is finished typing. Example usage:

  const [number, text, setText, formattedText] = useNumberInput(value, {
    maxValue,
    minValue,
    decimalPlaces,
  })
  return (
    <input
      type="text"
      value={text}
      onChange={({ currentTarget: { value: textValue } }: FormEvent) => {
        setText(textValue)
      }}
      onBlur={() => {
        setText(formattedText)
        if (number !== null) {
          onChange(number)
        }
      }}
      {...rest}
    />
  )

  Parameters

  • initValue: number

    initial numeric value

  • Default value constraints: NumericConstraints = {}

    numeric constraints

  Returns [number | null, string, function, string]