Renders native number input as a locale number (on blur) and reverts back to a workable number (on focus)
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.
npm i @yaireo/react-number-input -s
import NumberInput from '@yaireo/react-number-input'
const MyComponent = () => (
<NumberInput localeOptions={{
maximumFractionDigits:2,
currency:"USD",
style:"currency",
currencyDisplay:"symbol"
}}
></NumberInput>
)
Prop | Type | Default | Info |
---|---|---|---|
placeholder | string |
||
name | string |
||
inputMode | string |
"decimal" |
MDN docs |
onChange | function |
||
defaultValue | number |
"" |
|
localeOptions | Object |
MDN docs |