How To Format Number In Currency In ReactJs

In this article, we will learn how to format numbers in currency.

-Let’s build a React application.

–First of all, we have create react application.

–Then create an App.js file inside the src directory.

-After creating the App.js application, Install the required module using the below command.

npm i react-currency-format

Features:
-suffix, thousand separators, and prefix.
-individual format style.
-Masking

-Prefix and thousand separators:

import React from 'react'
import CurrencyFormat from 'react-currency-format';
function App() {
  return (
    <>
     <CurrencyFormat thousandSeparator={true} prefix={'$'} /> 
    </>
  )
}
export default App

output:

-Format with the pattern:

import React from 'react'
import CurrencyFormat from 'react-currency-format';
function App() {
  return (
    <>
      <CurrencyFormat format="#### #### #### ####" />
    </>
  )
}
export default App

output:

-Format with mask:

import React from 'react'
import CurrencyFormat from 'react-currency-format';
function App() {
  return (
    <>
      <CurrencyFormat format="#### #### #### ####" mask="_" />
    </>
  )
}
export default App

output: