react-intl-number-format
Tiny React components wrapping the ECMAScript Internationalization API with sane defaults to format numbers and currencies.
To see in detail the components Number
and Currency
with the list of props and examples please check the documentation site.
You can also play with react-intl-number-format
in a CodeSandbox.
Features
Installation
npm i react-intl-number-format
Usage
This is the easiest way to use Number
or Currency
formatter components:
import { Number, Currency } from "react-intl-number-format"
const Foo = () => (
<Number locale="de-DE">20000</Number>
)
const Bar = () => (
<Currency locale="en-US" currency="USD">20000</Currency>
)
const FooBar = () => (
<Currency locale="en-US" currency="USD" notation="compact">20130</Currency>
)
You don't even need to pass a locale
prop, by default it will try guess the locale from the browser.
Recommended usage with a React Context Provider
The recommended way to use it would be with a Context.Provider, this will allow you to have a global configuration so you don't need to pass props every time you format a number or a currency.
A provider IntlProvider
is exposed with a default config, but you can you set your own config and use it in your App
component. Also it's exposed a React Hook useIntl
to be able to update the formatting configuration for the Provider.
import { IntlProvider } from "react-intl-number-format"
const intlConfig = {
locale: "en-US",
options: {
currency: "USD",
maximumFractionDigits: 2
}
}
const App = () => (
<IntlProvider config={intlConfig}>
...
</IntlProvider>
)
import { Currency } from "react-intl-number-format"
const HelloWorld = () => (
<Currency>20000</Currency>
)
The configuration object that IntlProvider
expects is basically matching the arguments from Intl.NumberFormat constructor.