We can format numbers easily with the react-number-format library.

Getting Started

To use it, first we install it by running:

npm install react-number-format --save

Then we can use it by writing the following code:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        value={474849}
        displayType={"text"}
        thousandSeparator={true}
        prefix={"$"}
      />
    </div>
  );
}

We import the NumberFormat component from the react-number-format package.

The value is the number we want to format.

displayType is how we want to display our number. Setting it to 'text' means that we display it as text rather than an input box.

thousandSeparator indicates whether we want to add thousands separator to our formatted number.

prefix is the prefix that we want to put in our number.

Custom Rendering

We can add the renderText prop to with a function that renders a component to render the component our way.

For instance, we can write:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        value={2456981}
        displayType={"text"}
        thousandSeparator={true}
        prefix={"$"}
        renderText={value => <div>{value}</div>}
      />
    </div>
  );
}

We have value => <div>{value}</div> as the value of renderText to render our number in a div.

Grouping Thousands

We can group our thousands in a ways that’s different from the English format.

For example, we can write:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        value={2456981}
        thousandSeparator={true}
        thousandsGroupStyle="lakh"
        prefix={"₹"}
      />
    </div>
  );
}

Then we display the number Indian style.

Changing the Format

We can also change the format of the number.

For example, we can write:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat value={1111222233334444} format="#### #### #### ####" />
    </div>
  );
}

Then the number is displayed in credit card format.

Input Mask

We can add an input mask by using the mask attribute.

For instance, we can write:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        mask="_"
        value={1111222233334444}
        format="#### #### #### ####"
      />
    </div>
  );
}

Then if we erase it and enter something, underscores will be displayed for digits that haven’t been entered yet.

Conclusion

The NumberFormat component that comes with react-number-format can be great for formatting numbers.

We can display formatted numbers as text or an input box.