react-number-format

What is react-number-format?

The react-number-format package is a React component designed for formatting number input fields. It allows users to format numbers as currency, percentages, decimals, phone numbers, credit card numbers, and other custom formats. It also supports features like custom prefix, suffix, and thousand separator, masking, and custom formatting.

What are react-number-format's main functionalities?

Number Formatting

This feature allows you to format numbers with thousands separators and add a prefix. In this example, the number 2456981 is formatted as currency with a dollar sign prefix and commas as thousand separators, displayed as $2,456,981.

import NumberFormat from 'react-number-format';

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

Custom Format

This feature enables custom formatting for inputs. Here, the format prop defines the pattern for a phone number and the mask prop is used for placeholder characters, allowing users to enter a phone number in the format ###-###-####.

import NumberFormat from 'react-number-format';

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

Currency Formatting

This feature is used to format input as currency. It includes a thousand separator, a dollar sign prefix, and ensures that there are always two decimal places.

import NumberFormat from 'react-number-format';

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

Other packages similar to react-number-format

cleave.js

Cleave.js is a library that can format input text content when you are typing. It provides similar functionalities to react-number-format, such as number formatting, credit card formatting, phone number formatting, and date formatting. It differs in that it is not React-specific and can be used with plain JavaScript or other frameworks.

numeral

Numeral is a library for formatting and manipulating numbers. It's similar to react-number-format in that it can format numbers as currency, percentages, and other formats. However, it is not a React component and does not handle input fields directly. It is more focused on number manipulation and formatting in general JavaScript applications.

currency.js

Currency.js is a small and lightweight library for working with currency values. It allows you to perform arithmetic operations and formatting on currency numbers. While it provides similar currency formatting capabilities, it does not come as a React component and is more suited for general arithmetic and formatting operations rather than handling user input.

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: single character string or true/false (boolean)	false	Add thousand separators on number
decimalSeparator	mixed: single character string or true/false (boolean)	.	Support decimal point on a number
decimalPrecision	mixed: number or boolean	false (2 if true)	If false it does not limit decimal place, if true default precision is 2 or else limits to provided decimal place
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.
customInput	Component Reference	input	This allow supporting custom inputs with number format.
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={'$'} />

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