Install numora-react - React Numeric Input

Drop a precision-ready numeric input component into any React project in under a minute.

Install

numora-react has one peer dependency: numora (the core engine). Both are installed together. Pick your package manager:

pnpm add numora numora-react

Peer dependency: React 16.8 or higher (hooks support).

Basic Usage

import { NumoraInput, FormatOn } from 'numora-react'

function App() {
  return (
    <NumoraInput
      maxDecimals={2}
      formatOn={FormatOn.Change}
    />
  )
}

Controlled component

Use useState with NumoraInput like any controlled input. The raw value (no separators) lives in e.target.value:

import { useState } from 'react'
import { NumoraInput, FormatOn } from 'numora-react'

function AmountField() {
  const [amount, setAmount] = useState('')

  return (
    <>
      <NumoraInput
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        maxDecimals={6}
        formatOn={FormatOn.Change}
      />
      <p>Raw value: {amount}</p>
    </>
  )
}

What you get

• e.target.value - raw numeric string, no separators (safe for BigNumber, ethers, viem)
• e.target.formattedValue - display string with thousand separators
• forwardRef support - pass refs through to the underlying input
• All standard HTML input props - placeholder, disabled, className, aria-*, etc.
• React Hook Form compatible - works via Controller
• TypeScript-first - every prop and event is typed

TypeScript

NumoraInput accepts all standard HTMLInputElement props plus FormattingOptions. Import types directly from numora-react:

import type {
  FormattingOptions,
  NumoraInputChangeEvent,
  NumoraHTMLInputElement,
} from 'numora-react'

Next Steps

Read How It Works to understand the React event architecture, or jump to Formatting features.

How It Works React Hook Form