react-numeric

A react component for formatted number form fields

react-numeric is a wrapper component for autonumeric.

Installition

yarn add react-numeric
# or 
npm install react-numeric --save

Usage

import ReactNumeric from 'react-numeric';
 
export function USDMoneyInput(props){
  const { value } = props; // number typed
  return (
    <ReactNumeric
      value={value}
      currencySymbol="$"
      minimumValue="0"
      decimalCharacter="."
      digitGroupSeparator=""
      onChange={(event, value)=>{
        console.log(event.target.value); // '1,234.5 $'
        console.log(value); // 1234.5
      }}
    />
  );
}
 
// You can use predefinedOptions
import { predefinedOptions } from 'react-numeric';
 
export function PossitiveUSDMoneyInput(props){
  const { value } = props; // number typed
  return (
    <ReactNumeric
      value={value}
      preDefined={predefinedOptions.dollarPos}
      onChange={(e, value)=> this.setState({ value })}
    />
  );
}
 
// if you want to store value as string typed
export function NumberInput(props){
  const { value } = props; // string typed
  return (
    <ReactNumeric
      value={value}
      outputFormat="string"
      onChange={(e, value)=> this.setState({ value })}
    />
  );
}