react-intl-number-format

Tiny react component that wraps the ECMAScript Internationalization API with sane defaults to work with numbers and currencies.

Features

• Effortless format numbers and currencies for different locales
• Relies in the standard Intl.NumberFormat constructor
• Possibility to use it as an standalone React Component using props to configure it
• Possibility to use a general config using a React Context Provider
• Detects automatically the browser language as a default locale
• Exposes a function to update the Provider config
• Ability to render a number or a currency with any html tag
• Props match Intl.NumberFormat constructor arguments

Support

• Works in any modern browsers, and IE >= 11

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"

​

// renders 20.000

const Foo = () => (

  <Number locale="de-DE">20000</Number>

)

​

// renders $20,000.00

const Bar = () => (

  <Currency locale="en-US" currency="USD">20000</Currency>

)

​

// renders $20K

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.

Possible imports

You can import several things from react-intl-number-format, let's check the possibilities:

• Number Component to format numbers
• Currency Component to format currencies
• IntlProvider to set a global configuration
• useIntl hook to update the configuration