Registry / ui / react-intl-number-format

react-intl-number-format

library1.1.1jsnpmunverified

Lightweight React components (Number, Currency) and context provider for formatting numbers and currencies using the ECMAScript Intl.NumberFormat API. Current stable version is 1.1.1, released under MIT license. Release cadence is low (latest update over 2 years ago). Differentiates from alternatives like react-number-format by relying natively on Intl.NumberFormat, not requiring polyfills for modern browsers, and providing a Context Provider and hook for global configuration. Works in modern browsers and IE>=11.

npm install react-intl-number-format

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-INTL-NUMBER-

react-intl-number-format

uijavascriptv1.1.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Number

✓ import { Number } from 'react-intl-number-format'

✗ import Number from 'react-intl-number-format'

Default export does not exist; must use named import.

Currency

✓ import { Currency } from 'react-intl-number-format'

✗ const Currency = require('react-intl-number-format').Currency

CommonJS require is also valid but less common in modern React projects.

IntlProvider

✓ import { IntlProvider } from 'react-intl-number-format'

✗ import { Provider } from 'react-intl-number-format'

The provider is named IntlProvider, not Provider.

useIntl

✓ import { useIntl } from 'react-intl-number-format'

✗ import useIntl from 'react-intl-number-format'

useIntl is a named export (hook). No default export.

Shows basic usage of Number and Currency components with an IntlProvider context for global locale and options.

import React from 'react'; import { Number, Currency, IntlProvider } from 'react-intl-number-format'; const config = { locale: 'de-DE', options: { currency: 'EUR', maximumFractionDigits: 2 } }; function App() { return ( <IntlProvider config={config}> <div> <Number locale="de-DE">20000</Number> <Currency currency="EUR">20000</Currency> </div> </IntlProvider> ); } export default App;

Debug

Known issues

gotchaThe component names 'Number' and 'Currency' are generic and may conflict with built-in global constructors (e.g., Number) or other libraries.

fix

Import with explicit namespacing or rename on import: import { Number as IntlNumber, Currency as IntlCurrency } from 'react-intl-number-format'.

affects: >=0.0.0

gotchaThe Intl.NumberFormat API relies on the browser's locale data; results may vary across browsers or Node.js versions. Polyfill may be needed for older environments.

fix

Use Intl polyfill (e.g., @formatjs/intl-numberformat) for Node.js or older browsers.

affects: >=0.0.0

gotchaWhen using the IntlProvider, the 'locale' and 'options' config props are only used as defaults; they can be overridden by individual component props.

fix

Explicitly pass props to Number/Currency if you need to override provider settings.

affects: >=0.0.0

Errors

Common errors & fixes

Uncaught ReferenceError: Intl is not defined

Missing Intl API in the runtime (e.g., older Node.js or insufficient polyfill).

fix

Install and import 'intl' polyfill or '@formatjs/intl-numberformat' for Node.js <14.

Module not found: Can't resolve 'react-intl-number-format'

Package not installed or import path incorrect.

fix

Run 'npm install react-intl-number-format' and ensure correct import path.

TypeError: Cannot read property 'format' of undefined

Component (Number/Currency) received invalid or missing children (e.g., non-numeric string, undefined).

fix

Ensure children are numbers or numeric strings: <Number>{20000}</Number>.

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for React components and hooks

react-domrequiredPeer dependency for DOM rendering

Agent activity

27 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/marciobarrios/react-intl-number-format ↗

packagereact-intl-number-format ↗

homepagehttps://github.com/marciobarrios/react-intl-number-format#readme ↗