React: useNumberInput

useNumberInput.ts

const useNumberInput = (ref: React.RefObject<HTMLInputElement>) => {
  const stepUp = React.useCallback(() => {
    if (!ref.current) return
    ref.current.stepUp()
    ref.current.dispatchEvent(new Event("change", { bubbles: true }))
  }, [ref])

  const stepDown = React.useCallback(() => {
    if (!ref.current) return
    ref.current.stepDown()
    ref.current.dispatchEvent(new Event("change", { bubbles: true }))
  }, [ref])

  const getValue = React.useCallback(() => {
    if (!ref.current) return
    return ref.current.valueAsNumber
  }, [ref])

  return { stepUp, stepDown, getValue }
}