/react-number-input

Renders native number input as a locale number (on blur) and reverts back to a workable number (on focus)

Primary LanguageJavaScript

converts input type number to locale string and back

React number-input component

Converts an <input type"number"> to a nicely-printed locale-based string when the input field has no focus, and when it receives focus, the input field reverts back to type number so it could be edited easily.

Supports currency transformation (AKA money) based on Number.prototype.toLocaleString.


Install

npm i @yaireo/react-number-input -s

Example usage (with currency)

import NumberInput from '@yaireo/react-number-input'

const MyComponent = () => (
  <NumberInput localeOptions={{
    maximumFractionDigits:2,
    currency:"USD",
    style:"currency",
    currencyDisplay:"symbol"
    }}
  />
)

Props

Prop Type Default Info
placeholder string
name string
inputMode string "decimal" MDN docs
onChange function
defaultValue number ""
localeOptions Object MDN docs