react-intl-number-input
A React component for masked and formatted number input.
Install
npm install react-intl-number-input
Usage
;; Component { superprops; thisstate = value: 0 maskedValue: 0 thishandleChange = thishandleChange; } { event; this; } { return <div> <p> <IntlNumberInput onChange=thishandleChange /> </p> <p> value: thisstatevalue </p> <p> maskedValue: thisstatemaskedValue </p> </div> ; } ;
Properties
Name | Type | Default Value | Description |
---|---|---|---|
value | number or string | 0 | Initial numeric value |
locale | string | 'en-US' | BCP 47 language tag. Defines a language code and a country or region code. Intl Locale Identification e.g. 'de-DE', 'pt-BR' and 'ja-JP' |
prefix | string | '' | String used as prefix for the masked value |
suffix | string | '' | String used as suffix for the masked value |
precision | number | 2 | Number of fraction digits to use |
onChange | function | n/a | (event, value, maskedValue) => {} Callback function to handle value changes |
Examples
// maskedValue: 1,234,567.89 <IntlNumberInput />
// maskedValue: 12,345.6789 <IntlNumberInput precision=4 />
// maskedValue: $1,234,567.89 <IntlNumberInput prefix="$" />
// maskedValue: 1,234% <IntlNumberInput suffix="%" precision=0 />
// maskedValue: R$ 1.234.567,89 <IntlNumberInput locale="pt-BR" prefix="R$ " precision=2 />