How to manually update input value while using Chakra UIs useNumberInput hook

Viewed 43

I'm currently using Chakra UIs useNumberInput hook for a custom number input component. I need to be able to update the input value returned by useNumberInput manually in the event that my API call fails, so that it can be set to the last value stored to Redux. Is there any way to do this while still taking advantage of useNumberInput?

function HookUsage() {
  const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } =
    useNumberInput({
      step: 0.01,
      defaultValue: 1.53,
      min: 1,
      max: 6,
      precision: 2,
    })

  const inc = getIncrementButtonProps()
  const dec = getDecrementButtonProps()
  const {
    // This is the value I want to be able to update or reset manually
    value,

    ...inputProps
  } = getInputProps()

  return (
    <HStack maxW='320px'>
      <Button {...inc}>+</Button>
      <Input value={value} {...inputProps} />
      <Button {...dec}>-</Button>
    </HStack>
  )
}

Pulled the above from Chakra UIs documentation:

Am I better off just ditching useNumberInput and building my own solution in this case?

0 Answers
Related