React js Number Format and styling

Displaying numbers is easy but when it comes to format the numbers is an hectic process.

We will make that hectic process into a minuteless work using the Intl.NumberFormat

The Intl.NumberFormat object is a constructor for objects that enable language sensitive number formatting

Syntax

new Intl.NumberFormat([locales[, options]]) Intl.NumberFormat.call(this[, locales[, options]])

Usage / Example

`var number = 35000;  

console.log(new Intl.NumberFormat(`'en-IN', {  
    style: 'currency',  
    currency: 'INR',  
    maximumSignificantDigits: 3}`).format(number));  
// → '`₹ `35,000' if in IN English locale`

Number Format in React Js

We will see how we can make the number format to be a common one

export const numberFormat = (value) =>
new Intl.NumberFormat('en-IN', {
style: 'currency',
currency: 'INR'
}).format(value);

Usage

import { numberFormat } from './numberFormat';

numberFormat(50000); //output as ₹ 50,000.00
numberFormat(10000); //output as ₹ 10,000.00

Parameters

locales(Optional)

Optional. A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see the Intl page.

options(Optional)

An object with some or all of the following properties:

localeMatcher — The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit"

style — The formatting style to use. Possible values are "decimal" for plain number formatting, "currency" for currency formatting, and "percent" for percent formatting; the default is "decimal"

currency — The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB — see the Current currency & funds code list. There is no default value; if the style is "currency", the currency property must be provided.

currencyDisplay — Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name"to use a localized currency name such as "dollar"; the default is "symbol"

useGrouping — Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. Possible values are true and false; the default is true.

The following properties fall into two groups: minimumIntegerDigits, minimumFractionDigits, and maximumFractionDigits in one group, minimumSignificantDigits and maximumSignificantDigits in the other. If at least one property from the second group is defined, then the first group is ignored.

minimumIntegerDigits — The minimum number of integer digits to use. Possible values are from 1 to 21; the default is 1.

minimumFractionDigits — The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0

maximumFractionDigits — The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3

minimumSignificantDigits — The minimum number of significant digits to use. Possible values are from 1 to 21; the default is 1

maximumSignificantDigits — The maximum number of significant digits to use. Possible values are from 1 to 21; the default is 21