react-numeric

1.0.0 • Public • Published

react-numeric

npm npm

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

Dependencies (1)

Dev Dependencies (21)

Package Sidebar

Install

npm i react-numeric

Weekly Downloads

1,229

Version

1.0.0

License

MIT

Unpacked Size

33.1 kB

Total Files

15

Last publish

Collaborators

  • mkg