numora.

Overview
Features
Integrations
XGitHub

Formatting

Numora formats numbers with thousand separators as the user types, preserving cursor position throughout.

Grouping styles

typescript
import { NumoraInput, ThousandStyle } from 'numora'

// Standard: 1,234,567
const input = new NumoraInput(container, {
  thousandSeparator: ',',
  thousandStyle: ThousandStyle.Thousand,
})

// Indian (Lakh): 12,34,567
const input = new NumoraInput(container, {
  thousandSeparator: ',',
  thousandStyle: ThousandStyle.Lakh,
})

// Chinese (Wan): 123,4567
const input = new NumoraInput(container, {
  thousandSeparator: ',',
  thousandStyle: ThousandStyle.Wan,
})

// None: 1234567
const input = new NumoraInput(container, {
  thousandSeparator: ',',
  thousandStyle: ThousandStyle.None,
})

When to format

typescript
import { NumoraInput, FormatOn } from 'numora'

// Blur (default) - format when the input loses focus
const input = new NumoraInput(container, {
  formatOn: FormatOn.Blur,
  thousandSeparator: ',',
})

// Change - format on every keystroke
const input = new NumoraInput(container, {
  formatOn: FormatOn.Change,
  thousandSeparator: ',',
})

Automatic behaviors

  • Cursor preservation - the cursor stays in the correct position when separators are added or removed during formatting
  • Separator skipping - backspace and delete automatically skip over thousand separators so they never need to be deleted manually