Socket
Socket
Sign inDemoInstall

react-intl-number-format

Package Overview
Dependencies
7
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-intl-number-format

Number and currency formatter based on the ECMAScript Internationalization API


Version published
Weekly downloads
400
decreased by-12.09%
Maintainers
1
Install size
282 kB
Created
Weekly downloads
 

Readme

Source

react-intl-number-format

npm version Build Status Codecov Coverage License: MIT

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"

// 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.

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.

// In your App.js or similar...
import { IntlProvider } from "react-intl-number-format"

const intlConfig = {
  locale: "en-US",
  options: {
    currency: "USD",
    maximumFractionDigits: 2
  }
}

const App = () => (
  <IntlProvider config={intlConfig}>
    ...
  </IntlProvider>
)

// In any other part of your code
import { Currency } from "react-intl-number-format"

const HelloWorld = () => (
  // renders $20,000 (based on the provider config)
  <Currency>20000</Currency>
)

The configuration object that IntlProvider expects is basically matching the arguments from Intl.NumberFormat constructor.

Keywords

FAQs

Last updated on 02 Dec 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc