react-intl-number-input

A React component for masked and formatted number input.

Demo

Install

npm install react-intl-number-input

Usage

import React from 'react'
import { render } from 'react-dom';
import IntlNumberInput from 'react-intl-number-input';
 
class App extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      value: 0,
      maskedValue: 0,
    }
 
    this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange(event, value, maskedValue) {
    event.preventDefault();
    this.setState({ value, maskedValue });
  }
 
  render() {
    return (
      <div>
        <p>
          <IntlNumberInput onChange={this.handleChange} />
        </p>
        <p>
          value: {this.state.value}
        </p>
        <p>
          maskedValue: {this.state.maskedValue}
        </p>
      </div>
    );
  }
}
 
render(<App />, document.getElementById("root"));

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}
    />