JSPM

  • Created
  • Published
  • Downloads 1998179
  • Score
    100M100P100Q187019F
  • License MIT

React component to format number in an input or as a text.

Package Exports

  • react-number-format
  • react-number-format/dist/react-number-format

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-number-format) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-number-format

React component to format number in an input or as a text

Features

  1. Allow prefix, suffix and thousand separator.
  2. Allow format pattern.
  3. Allow masking.
  4. Allow custom formatting handler.
  5. Allow formatting a input or a simple text

Install

Through npm npm install react-number-format --save

Or get compiled development and production version from ./dist

Props

Props Options Default Description
thousandSeparator mixed: true/false (boolean) or ,/. (string) false Add thousand separators on number
decimalSeparator mixed: ./, (string) or true/false (boolean) . Support decimal point on a number
prefix String (ex : $) none Add a prefix before the number
suffix String (ex : /-) none Add a prefix after the number
value Number null Give initial value to number format
displayType String: text / input input If input it renders a input element where formatting happens as you input characters. If text it renders it as a normal text in a span formatting the given value
format String : Hash based ex (#### #### #### ####)
Or Function
none If format given as hash string allow number input inplace of hash. If format given as function, component calls the function with unformatted number and expects formatted number.
mask String (ex : _) none If mask defined, component will show non entered placed with masked value.
onChange (e, value) => {} none onChange handler accepts event object through which you can get formattedValue (e.targe.value # $2,223) and second parameter non formatted value (ie: 2223)

Other than this it accepts all the props which can be given to a input or span based on displayType you selected.

Examples

Prefix and thousand separator : Format currency as text

var NumberFormat = require('react-number-format');

<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />

Output : $2,456,981

Format with pattern : Format credit card as text

<NumberFormat value={4111111111111111} displayType={'text'} format="#### #### #### ####" />

Output : 4111 1111 1111 1111

Prefix and thousand separator : Format currency in input

<NumberFormat thousandSeparator={true} prefix={'$'} />

Screencast example

Maintaining change value on state

<NumberFormat value={this.state.profit} thousandSeparator={true} prefix={'$'} onChange={(e, value) => {
    const formattedValue = e.target.value; // $222,3
    //value will be non formatted value ie, 2223
    this.setState({profit: value})
  }}/>

Format with pattern : Format credit card in an input

<NumberFormat format="#### #### #### ####" />

Screencast example

Format with mask : Format credit card in an input

<NumberFormat format="#### #### #### ####" mask="_"/>

Screencast example

Custom format method : Format credit card expiry time

  function formatExpiryChange(val){
    if(val && Number(val[0]) > 1){
      val = '0'+val;
    }
    if(val && val.length >1 && Number(val[0]+val[1]) > 12){
      val = '12'+val.substring(2,val.length);
    }
    val = val.substring(0,2)+ (val.length > 2 ? '/'+val.substring(2,4) : '');
    return val;
  }

<NumberFormat format={formatExpiryChange}/>

Screencast example

Live Demo

http://codepen.io/s-yadav/pen/bpKNMa

Major Updates

v1.0.0

  • Support decimals
  • Support changing thousandSeparator to ','
  • Updated complete code to ES6
  • Added propTypes validation
  • Fixed #1, #7, #8, #9

Development

  • Download the zip
  • npm install
  • npm start to run example server
  • npm run test to test changes
  • npm run bundle to bundle files

Testing

Test cases are written in jasmine and run by karma Test file : /test/test_input.js To run test : npm run test