npm.io
2.0.3 • Published 8 years ago

@vinks/react-number-format

Licence
MIT
Version
2.0.3
Deps
1
Vulns
0
Weekly
0
Stars
4.1K
SummaryDependencyVersions

react-number-format

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

Features

  1. Prefix, suffix and thousand separator.
  2. Custom format pattern.
  3. Masking.
  4. Custom formatting handler.
  5. Formatting a input or a simple text.

Install

npm

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

Or get compiled development and production version from ./dist

Props
Props Options Default Description
thousandSeparator mixed: single character string or boolean true (true is default to ,) none Add thousand separators on number
decimalSeparator single character string . Support decimal point on a number
decimalPrecision number none If defined it limits to given decimal precision
allowNegative boolean true allow negative numbers (Only when format option is not provided)
prefix String (ex : $) none Add a prefix before the number
suffix String (ex : /-) none Add a prefix after the number
value Number or String null Value to the number format. If passed as string it should have same decimal separator as the decimalSeparator props
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
type One of ['text', 'tel'] text Input type attribute
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.
customInput Component Reference input This allow supporting custom inputs with number format.
onChange (e, values) => {} none onChange handler accepts event object and values object
isAllowed (values) => true or false none A checker function to check if input value is valid or not

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

values object

values object is on following format

{
  formattedValue: '$23,234,235.56', //value after applying formatting
  value: '23234235.56', //non formatted value as string, but it maintains the decimalSeparator provided, so if , is decimal separator then value will be 23234235,56
  floatValue: 23234235.56 //floating point representation. For big numbers it can have exponential syntax
}
Notes and quirks

  1. Value can be passed as string or number, but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop.

  2. Value as prop will be rounded to given precision if format option is not provided.

  3. If you want to block floating number set decimalPrecision to 0.

  4. Use type as tel when you are providing format prop. This will change the mobile keyboard layout to have only numbers. In other case use type as text, so user can type decimal separator.

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={'

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 limit(val, max) {
  if (val.length === 1 && val[0] > max[0]) {
    val = '0' + val;
  }

  if (val.length === 2) {
    if (Number(val) === 0) {
      val = '01';

    //this can happen when user paste number
  } else if (val > max) {
      val = max;
    }
  }

  return val;
}

function cardExpiry(val) {
  let month = limit(val.substring(0, 2), '12');
  let date = limit(val.substring(2, 4), '31');

  return month + (date.length ? '/' + date : '');
}

<NumberFormat format={cardExpiry}/>


Screencast example


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


Screencast example


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


Show your support


 this repo


Major Updates


v2.0.0


    

  • Added isAllowed prop to validate custom input and reject input based on it.
    • 

  • onChange api been changed. Now it receives values object as second parameter.
    • 

  • decimalSeparator no longer support boolean values
    • 

  • thousandSeparator accepts only true as boolean (which defaults to ,) or thousandSeparator string
    • 

  • decimalPrecision only accepts number Now
    • 

  • Value can be passed as string or number but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop.
    • 

  • Added back the type prop for the input type attribute (Only text or tel is supported)
    • 

  • Enforce cursor to be between prefix and suffix in focus, click or arrow navigation.
    • 

  • Lot of bugs and stability fixes (See release notes)
    • 



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

} />


Output : $2,456,981


Format with pattern : Format credit card as text

__CODE_BLOCK_2__

Output : 4111 1111 1111 1111


Prefix and thousand separator : Format currency in input

__CODE_BLOCK_3__

Screencast example


Maintaining change value on state

__CODE_BLOCK_4__

Format with pattern : Format credit card in an input

__CODE_BLOCK_5__

Screencast example


Format with mask : Format credit card in an input

__CODE_BLOCK_6__

Screencast example


Custom format method  : Format credit card expiry time

__CODE_BLOCK_7__

Screencast example


Custom Inputs


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

__CODE_BLOCK_8__
__CODE_BLOCK_9__

Screencast example


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

__CODE_BLOCK_10__

Live Demo


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


Show your support


 this repo


Major Updates


v2.0.0


    

  • Added isAllowed prop to validate custom input and reject input based on it.
    • 

  • onChange api been changed. Now it receives values object as second parameter.
    • 

  • decimalSeparator no longer support boolean values
    • 

  • thousandSeparator accepts only true as boolean (which defaults to ,) or thousandSeparator string
    • 

  • decimalPrecision only accepts number Now
    • 

  • Value can be passed as string or number but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop.
    • 

  • Added back the type prop for the input type attribute (Only text or tel is supported)
    • 

  • Enforce cursor to be between prefix and suffix in focus, click or arrow navigation.
    • 

  • Lot of bugs and stability fixes (See release notes)
    • 



Development


    

  • Download the zip
    • 

  • __INLINE_CODE_1__
    • 

  • __INLINE_CODE_2__ to run example server
    • 

  • __INLINE_CODE_3__ to test changes
    • 

  • __INLINE_CODE_4__ to bundle files
    • 



Testing


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

} />


Screencast example


Maintaining change value on state

__CODE_BLOCK_4__

Format with pattern : Format credit card in an input

__CODE_BLOCK_5__

Screencast example


Format with mask : Format credit card in an input

__CODE_BLOCK_6__

Screencast example


Custom format method  : Format credit card expiry time

__CODE_BLOCK_7__

Screencast example


Custom Inputs


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

__CODE_BLOCK_8__
__CODE_BLOCK_9__

Screencast example


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

__CODE_BLOCK_10__

Live Demo


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


Show your support


 this repo


Major Updates


v2.0.0


    

  • Added isAllowed prop to validate custom input and reject input based on it.
    • 

  • onChange api been changed. Now it receives values object as second parameter.
    • 

  • decimalSeparator no longer support boolean values
    • 

  • thousandSeparator accepts only true as boolean (which defaults to ,) or thousandSeparator string
    • 

  • decimalPrecision only accepts number Now
    • 

  • Value can be passed as string or number but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop.
    • 

  • Added back the type prop for the input type attribute (Only text or tel is supported)
    • 

  • Enforce cursor to be between prefix and suffix in focus, click or arrow navigation.
    • 

  • Lot of bugs and stability fixes (See release notes)
    • 



Development


    

  • Download the zip
    • 

  • __INLINE_CODE_1__
    • 

  • __INLINE_CODE_2__ to run example server
    • 

  • __INLINE_CODE_3__ to test changes
    • 

  • __INLINE_CODE_4__ to bundle files
    • 



Testing


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

} />

Output : $2,456,981

Format with pattern : Format credit card as text
__CODE_BLOCK_2__

Output : 4111 1111 1111 1111

Prefix and thousand separator : Format currency in input
__CODE_BLOCK_3__

Screencast example

Maintaining change value on state
__CODE_BLOCK_4__
Format with pattern : Format credit card in an input
__CODE_BLOCK_5__

Screencast example

Format with mask : Format credit card in an input
__CODE_BLOCK_6__

Screencast example

Custom format method : Format credit card expiry time
__CODE_BLOCK_7__

Screencast example

Custom Inputs

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

__CODE_BLOCK_8__ __CODE_BLOCK_9__

Screencast example

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

__CODE_BLOCK_10__
Live Demo

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

Show your support

this repo

Major Updates
v2.0.0
  • Added isAllowed prop to validate custom input and reject input based on it.
  • onChange api been changed. Now it receives values object as second parameter.
  • decimalSeparator no longer support boolean values
  • thousandSeparator accepts only true as boolean (which defaults to ,) or thousandSeparator string
  • decimalPrecision only accepts number Now
  • Value can be passed as string or number but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop.
  • Added back the type prop for the input type attribute (Only text or tel is supported)
  • Enforce cursor to be between prefix and suffix in focus, click or arrow navigation.
  • Lot of bugs and stability fixes (See release notes)
Development
  • Download the zip
  • __INLINE_CODE_1__
  • __INLINE_CODE_2__ to run example server
  • __INLINE_CODE_3__ to test changes
  • __INLINE_CODE_4__ to bundle files
Testing

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

} onChange={(e, values) => { const {formattedValue, value} = values; // formattedValue = $222,3 //value ie, 2223 this.setState({profit: value}) }}/>
Format with pattern : Format credit card in an input
__CODE_BLOCK_5__

Screencast example

Format with mask : Format credit card in an input
__CODE_BLOCK_6__

Screencast example

Custom format method : Format credit card expiry time
__CODE_BLOCK_7__

Screencast example

Custom Inputs

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

__CODE_BLOCK_8__ __CODE_BLOCK_9__

Screencast example

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

__CODE_BLOCK_10__
Live Demo

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

Show your support

this repo

Major Updates
v2.0.0
  • Added isAllowed prop to validate custom input and reject input based on it.
  • onChange api been changed. Now it receives values object as second parameter.
  • decimalSeparator no longer support boolean values
  • thousandSeparator accepts only true as boolean (which defaults to ,) or thousandSeparator string
  • decimalPrecision only accepts number Now
  • Value can be passed as string or number but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop.
  • Added back the type prop for the input type attribute (Only text or tel is supported)
  • Enforce cursor to be between prefix and suffix in focus, click or arrow navigation.
  • Lot of bugs and stability fixes (See release notes)
Development
  • Download the zip
  • __INLINE_CODE_1__
  • __INLINE_CODE_2__ to run example server
  • __INLINE_CODE_3__ to test changes
  • __INLINE_CODE_4__ to bundle files
Testing

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

} />

Output : $2,456,981

Format with pattern : Format credit card as text
__CODE_BLOCK_2__

Output : 4111 1111 1111 1111

Prefix and thousand separator : Format currency in input
__CODE_BLOCK_3__

Screencast example

Maintaining change value on state
__CODE_BLOCK_4__
Format with pattern : Format credit card in an input
__CODE_BLOCK_5__

Screencast example

Format with mask : Format credit card in an input
__CODE_BLOCK_6__

Screencast example

Custom format method : Format credit card expiry time
__CODE_BLOCK_7__

Screencast example

Custom Inputs

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

__CODE_BLOCK_8__ __CODE_BLOCK_9__

Screencast example

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

__CODE_BLOCK_10__
Live Demo

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

Show your support

this repo

Major Updates
v2.0.0
  • Added isAllowed prop to validate custom input and reject input based on it.
  • onChange api been changed. Now it receives values object as second parameter.
  • decimalSeparator no longer support boolean values
  • thousandSeparator accepts only true as boolean (which defaults to ,) or thousandSeparator string
  • decimalPrecision only accepts number Now
  • Value can be passed as string or number but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop.
  • Added back the type prop for the input type attribute (Only text or tel is supported)
  • Enforce cursor to be between prefix and suffix in focus, click or arrow navigation.
  • Lot of bugs and stability fixes (See release notes)
Development
  • Download the zip
  • __INLINE_CODE_1__
  • __INLINE_CODE_2__ to run example server
  • __INLINE_CODE_3__ to test changes
  • __INLINE_CODE_4__ to bundle files
Testing

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

} />

Screencast example

Maintaining change value on state
__CODE_BLOCK_4__
Format with pattern : Format credit card in an input
__CODE_BLOCK_5__

Screencast example

Format with mask : Format credit card in an input
__CODE_BLOCK_6__

Screencast example

Custom format method : Format credit card expiry time
__CODE_BLOCK_7__

Screencast example

Custom Inputs

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

__CODE_BLOCK_8__ __CODE_BLOCK_9__

Screencast example

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

__CODE_BLOCK_10__
Live Demo

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

Show your support

this repo

Major Updates
v2.0.0
  • Added isAllowed prop to validate custom input and reject input based on it.
  • onChange api been changed. Now it receives values object as second parameter.
  • decimalSeparator no longer support boolean values
  • thousandSeparator accepts only true as boolean (which defaults to ,) or thousandSeparator string
  • decimalPrecision only accepts number Now
  • Value can be passed as string or number but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop.
  • Added back the type prop for the input type attribute (Only text or tel is supported)
  • Enforce cursor to be between prefix and suffix in focus, click or arrow navigation.
  • Lot of bugs and stability fixes (See release notes)
Development
  • Download the zip
  • __INLINE_CODE_1__
  • __INLINE_CODE_2__ to run example server
  • __INLINE_CODE_3__ to test changes
  • __INLINE_CODE_4__ to bundle files
Testing

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

} />

Output : $2,456,981

Format with pattern : Format credit card as text
__CODE_BLOCK_2__

Output : 4111 1111 1111 1111

Prefix and thousand separator : Format currency in input
__CODE_BLOCK_3__

Screencast example

Maintaining change value on state
__CODE_BLOCK_4__
Format with pattern : Format credit card in an input
__CODE_BLOCK_5__

Screencast example

Format with mask : Format credit card in an input
__CODE_BLOCK_6__

Screencast example

Custom format method : Format credit card expiry time
__CODE_BLOCK_7__

Screencast example

Custom Inputs

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

__CODE_BLOCK_8__ __CODE_BLOCK_9__

Screencast example

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

__CODE_BLOCK_10__
Live Demo

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

Show your support

this repo

Major Updates
v2.0.0
  • Added isAllowed prop to validate custom input and reject input based on it.
  • onChange api been changed. Now it receives values object as second parameter.
  • decimalSeparator no longer support boolean values
  • thousandSeparator accepts only true as boolean (which defaults to ,) or thousandSeparator string
  • decimalPrecision only accepts number Now
  • Value can be passed as string or number but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop.
  • Added back the type prop for the input type attribute (Only text or tel is supported)
  • Enforce cursor to be between prefix and suffix in focus, click or arrow navigation.
  • Lot of bugs and stability fixes (See release notes)
Development
  • Download the zip
  • __INLINE_CODE_1__
  • __INLINE_CODE_2__ to run example server
  • __INLINE_CODE_3__ to test changes
  • __INLINE_CODE_4__ to bundle files
Testing

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

Keywords

react-componentreactcurrencyinputnumbernumber-formatmask