react-number-format-clari v1.1.2-alpha.5

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

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={'$'} />

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="#### #### #### ####" />

Format with mask : Format credit card in an input

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

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

Custom Inputs

You can easily extend your custom input with number format. But custom input should have all input props.

  import TextField from 'material-ui/TextField';

  <NumberFormat customInput={TextField} format="#### #### #### ####"/>

Passing custom input props All custom input props and number input props are passed together.

  <NumberFormat hintText="Some placeholder" value={this.state.card} customInput={TextField} format="#### #### #### ####"/>

Live Demo

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

Major Updates

v1.1.0

• Support custom input
• Support custom decimal / thousandSeparator
• Support providing decimal precision
• Bug fixes (See release notes)

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