Numora React - React Numeric Input Component

numora-react is a drop-in replacement for <input> that handles all numeric formatting, sanitization, and cursor management inside React. It's a forwardRef component that works in controlled and uncontrolled patterns and accepts every standard HTML input attribute.

What makes it different

On every change, e.target.value always returns the raw numeric string - no separators, no formatting characters. Safe to pass directly to BigNumber, ethers.js, viem, or any precision math library. No parsing step needed.

e.target.formattedValue gives you the display string with thousand separators and decimal formatting for showing to the user. Two values, one event - clean separation between machine-readable and human-readable.

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

function Amount() {
  return (
    <NumoraInput
      formatOn={FormatOn.Change}
      maxDecimals={2}
      thousandSeparator=","
      onChange={(e) => {
        console.log(e.target.value)          // "1234.56" - raw
        console.log(e.target.formattedValue) // "1,234.56" - display
      }}
    />
  )
}

React ecosystem

• Controlled & uncontrolled - works either way, no special props required
• React Hook Form - drop-in compatible via Controller
• Formik - works as a custom field component
• forwardRef - pass refs through to the underlying input
• All HTML input props - placeholder, disabled, className, aria-*, etc.
• TypeScript-first - full type definitions for props, events, and options

Why numora-react?

Every React DeFi app reinvents the numeric input. Uniswap, Aave, and Curve all maintain hundreds of lines of custom keystroke handlers, regex sanitizers, and cursor position trackers. numora-react ships all of that as a single component you configure with props.

The component delegates to the same core numora engine - a vanilla TypeScript library with zero runtime dependencies. The React layer is a thin wrapper that hooks the engine into React's event system and value tracker.

Next Steps

Follow the Installation guide to add numora-react to your project, or read How It Works for the React-specific event architecture.

Installation