useBigIntInput

• handles masking, decimal and thousands separators (., ,) based on the navigator lang
• uses 'decimal' inputMode so the keyboard on mobile is right
• keeps the cursor position while editing the masked input value
• provides a bigint value so you don't lose precision on operations, with value and decimals aligning with erc20 tokens, so for example a value of 1000000 with 6 decimals is "1.00"

Install

npm add use-bigint-input

pnpm add use-bigint-input

yarn add use-bigint-input

Usage

function YourCustomInput(
  { value, decimals, onChange }:
  { value: bigint; decimals: number; onChange: (value: bigint) => void }
) {
  const inputRef = useRef<HTMLInputElement>(null)

  const inputProps = useBigIntInput({
    ref: inputRef,
    decimals,
    value,
    onChange(value, maskedValue, changedFromProps) {
      if (!changedFromProps) onChange(value)
    },
  })

  return <input {...inputProps} />
}