Package Exports

react-numeric

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-numeric) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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