# React js Number Format and styling

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055727740/c69d3fcf-ea97-4a37-9c60-485e580ce260.png align="left")

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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

```javascript
`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

<iframe src="https://codesandbox.io/embed/13o93vl66l" width="700" height="350"></iframe>

### 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).

**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](http://www.currency-iso.org/en/home/tables/table-a1.html). 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