{"id":41831,"library":"react-intl-number-format","title":"react-intl-number-format","description":"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.","status":"active","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/marciobarrios/react-intl-number-format","tags":["javascript","react","currency","numberformat","format","formatter","internationalization"],"install":[{"cmd":"npm install react-intl-number-format","lang":"bash","label":"npm"},{"cmd":"yarn add react-intl-number-format","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-intl-number-format","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for React components and hooks","package":"react","optional":false},{"reason":"Peer dependency for DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"Default export does not exist; must use named import.","wrong":"import Number from 'react-intl-number-format'","symbol":"Number","correct":"import { Number } from 'react-intl-number-format'"},{"note":"CommonJS require is also valid but less common in modern React projects.","wrong":"const Currency = require('react-intl-number-format').Currency","symbol":"Currency","correct":"import { Currency } from 'react-intl-number-format'"},{"note":"The provider is named IntlProvider, not Provider.","wrong":"import { Provider } from 'react-intl-number-format'","symbol":"IntlProvider","correct":"import { IntlProvider } from 'react-intl-number-format'"},{"note":"useIntl is a named export (hook). No default export.","wrong":"import useIntl from 'react-intl-number-format'","symbol":"useIntl","correct":"import { useIntl } from 'react-intl-number-format'"}],"quickstart":{"code":"import React from 'react';\nimport { Number, Currency, IntlProvider } from 'react-intl-number-format';\n\nconst config = { locale: 'de-DE', options: { currency: 'EUR', maximumFractionDigits: 2 } };\n\nfunction App() {\n  return (\n    <IntlProvider config={config}>\n      <div>\n        <Number locale=\"de-DE\">20000</Number>\n        <Currency currency=\"EUR\">20000</Currency>\n      </div>\n    </IntlProvider>\n  );\n}\n\nexport default App;","lang":"javascript","description":"Shows basic usage of Number and Currency components with an IntlProvider context for global locale and options."},"warnings":[{"fix":"Import with explicit namespacing or rename on import: import { Number as IntlNumber, Currency as IntlCurrency } from 'react-intl-number-format'.","message":"The component names 'Number' and 'Currency' are generic and may conflict with built-in global constructors (e.g., Number) or other libraries.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use Intl polyfill (e.g., @formatjs/intl-numberformat) for Node.js or older browsers.","message":"The 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.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Explicitly pass props to Number/Currency if you need to override provider settings.","message":"When using the IntlProvider, the 'locale' and 'options' config props are only used as defaults; they can be overridden by individual component props.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"search_vec":"'1.1.1':28 '11':78 '2':40 'ago':42 'altern':45 'api':23 'browser':61,75 'cadenc':34 'compon':8 'configur':71 'context':12,65 'currenc':10,18,81 'current':24 'differenti':43 'ecmascript':21 'format':5,15,50,83 'formatt':84 'global':70 'hook':68 'ie':77 'internation':85 'intl':3 'intl.numberformat':22,55 'javascript':79 'latest':37 'licens':32 'lightweight':6 'like':46 'low':36 'mit':31 'modern':60,74 'nativ':53 'number':4,9,16,49 'numberformat':82 'polyfil':58 'provid':13,63,66 'react':2,7,48,80 'react-intl-number-format':1 'react-number-format':47 'releas':29,33 'reli':52 'requir':57 'stabl':25 'updat':38 'use':19 'version':26 'work':72 'year':41","created_at":"2026-06-04T18:54:19.332288+00:00","updated_at":"2026-06-04T18:54:19.332288+00:00","problems":[{"fix":"Install and import 'intl' polyfill or '@formatjs/intl-numberformat' for Node.js <14.","cause":"Missing Intl API in the runtime (e.g., older Node.js or insufficient polyfill).","error":"Uncaught ReferenceError: Intl is not defined"},{"fix":"Run 'npm install react-intl-number-format' and ensure correct import path.","cause":"Package not installed or import path incorrect.","error":"Module not found: Can't resolve 'react-intl-number-format'"},{"fix":"Ensure children are numbers or numeric strings: <Number>{20000}</Number>.","cause":"Component (Number/Currency) received invalid or missing children (e.g., non-numeric string, undefined).","error":"TypeError: Cannot read property 'format' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/marciobarrios/react-intl-number-format#readme","github":"https://github.com/marciobarrios/react-intl-number-format","docs":null,"changelog":null,"pypi":null,"npm":"react-intl-number-format","openapi_spec":null,"status_page":null,"smithery":null,"categories":["ui"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}