{"_id":"@chaitanyapotti/react-intl-number-format","_rev":"1-6bf8cea293d2e4886cf64e0d4bd91c13","name":"@chaitanyapotti/react-intl-number-format","dist-tags":{"latest":"1.1.2"},"versions":{"1.1.2":{"name":"@chaitanyapotti/react-intl-number-format","version":"1.1.2","description":"Number and currency formatter based on the ECMAScript Internationalization API","main":"dist/index.js","unpkg":"dist/index.umd.js","scripts":{"commit":"git-cz","build":"microbundle --jsx React.createElement","dev":"microbundle --jsx React.createElement watch","docz:dev":"docz dev","docz:build":"docz build","lint":"eslint src/**","test":"jest","test:watch":"jest --watch","prePublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/marciobarrios/react-intl-number-format.git"},"keywords":["react","currency","numberformat","format","formatter","internationalization"],"author":{"name":"Marcio Barrios","email":"marciobarrios@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/marciobarrios/react-intl-number-format/issues"},"homepage":"https://github.com/marciobarrios/react-intl-number-format#readme","config":{"commitizen":{"path":"cz-conventional-changelog"}},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS","pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.mdx":["prettier --write","git add"],"src/**/*.js":["prettier --write","eslint --fix","git add"]},"devDependencies":{"@babel/preset-env":"^7.9.5","@babel/preset-react":"^7.9.4","@commitlint/cli":"^8.3.5","@commitlint/config-conventional":"^8.3.4","babel-eslint":"^10.1.0","babel-jest":"^25.3.0","codecov":"^3.6.5","commitizen":"^4.0.4","docz":"^2.3.1","docz-theme-default":"^1.2.0","eslint":"^6.8.0","eslint-config-react-app":"^5.2.1","eslint-plugin-flowtype":"^4.7.0","eslint-plugin-import":"^2.20.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^3.0.0","husky":"^4.2.5","jest":"^25.3.0","lint-staged":"^10.1.3","microbundle":"^0.11.0","prettier":"^2.0.4","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","semantic-release":"^17.0.6"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"dependencies":{"@testing-library/react":"^10.0.2","get-user-locale":"^1.3.0"},"gitHead":"86ee97d59aa488d7630fc2e8b3306b932cc9e5a3","_id":"@chaitanyapotti/react-intl-number-format@1.1.2","_nodeVersion":"10.19.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-HtvqJLBxf4aqBRf/szMRjHJPI7+k1vB3ztVaetGiz/v/i0YdVdttFimzZ2bU5/Sr/n5d4ygx1b/Xdy1UAQCCMQ==","shasum":"b5183591129e977e72fff1a324ea59863a4e6955","tarball":"https://registry.npmjs.org/@chaitanyapotti/react-intl-number-format/-/react-intl-number-format-1.1.2.tgz","fileCount":9,"unpackedSize":261284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemV9fCRA9TVsSAnZWagAA3JgP/i3KuHoWGdIh2TintcpG\niH8nSfnkKbQT3pmA1OJm9u9Ep3z5zhx1u2BEVdPmG64O7xUc+BsR0ASmadWQ\nUw6PPJGUn979VaHFhAuR7xTBEJXtNVXHPfQVeiontXyUW+aNIdYw/vSoR2AD\n81tu8uT0Uae9BrHJNLV2EQ506ZnuIISSARZyxvX+AWzdWKpDJX0ZoFTq+s9s\nj0/MOPop4kgFGpLLvnRR7l1KHuPi4eirxpjVFDmEI2DhNBqEfMbTxOhmeRUs\naDUTsXcY4smwIToH5UYJRgbmsFOxDcUiueuPj25pafpql69pl5wBBnV4bjuZ\nsU113u51Gp2xAPIWOJmlFwFPsgRBy1UQncCC096SLEz2o9E7UZ2aU4iLgI1U\nIzW+tl7RugGDdI3JeqYm6ig5L2IY//TvFXBmR+EwmvVdeKe1V7fdWEEeusvB\nuxcR2rBkhqdm6WKQyBrDp6CU5HBVREhuD7kosJPlEtu2XvktSuF1oSLndmi2\nL8zQPAryGHepr6quv/zKdX5iDU3H7fmWf9BcKW6rvkeMmxbelK1Ox5izsegu\nmCMwLosGFJW4q0GgESRolTJKZqLt2vFwuJmUDFGXq+ItLPsGsBiQvVOyzvkL\n0hVA6SvBZLmXsCqbWGTZceEcJjoNY9t51JaQeFvtD2+R85kZFLkDXlx30x2j\nuxuv\r\n=A7Uv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcsKSbQIZ/NNuTkFh84FQgLxkrcy610i9bnbnCNoLLGwIgO+Zx8pnq/x5OPGz+Oq/kNQSR5wwfMpHJ1FsNa/HexVk="}]},"maintainers":[{"name":"chaitanyapotti","email":"chaitanya.potti@gmail.com"}],"_npmUser":{"name":"chaitanyapotti","email":"chaitanya.potti@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-intl-number-format_1.1.2_1587109726242_0.9552567000660315"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-17T07:48:46.190Z","1.1.2":"2020-04-17T07:48:46.867Z","modified":"2022-04-04T22:27:51.568Z"},"maintainers":[{"name":"chaitanyapotti","email":"chaitanya.potti@gmail.com"}],"description":"Number and currency formatter based on the ECMAScript Internationalization API","homepage":"https://github.com/marciobarrios/react-intl-number-format#readme","keywords":["react","currency","numberformat","format","formatter","internationalization"],"repository":{"type":"git","url":"git+https://github.com/marciobarrios/react-intl-number-format.git"},"author":{"name":"Marcio Barrios","email":"marciobarrios@gmail.com"},"bugs":{"url":"https://github.com/marciobarrios/react-intl-number-format/issues"},"license":"MIT","readme":"# react-intl-number-format\n\n[![npm version](https://img.shields.io/npm/v/react-intl-number-format.svg)](https://www.npmjs.com/package/react-intl-number-format)\n[![Build Status](https://travis-ci.com/marciobarrios/react-intl-number-format.svg?branch=master)](https://travis-ci.com/marciobarrios/react-intl-number-format)\n[![Codecov Coverage](https://img.shields.io/codecov/c/github/marciobarrios/react-intl-number-format/master.svg?style=flat-square)](https://codecov.io/gh/marciobarrios/react-intl-number-format/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n\nTiny React components wrapping the ECMAScript Internationalization API with sane defaults to format numbers and currencies.\n\nTo see in detail the components `Number` and `Currency` with the list of props and examples please [check the documentation site](https://react-intl-number-format.netlify.com/).\n\nYou can also play with `react-intl-number-format` in a [CodeSandbox](https://codesandbox.io/s/react-intl-number-format-u1rt3).\n\n## Features\n\n- Effortless format numbers and currencies for different locales\n- Relies in the standard [Intl.NumberFormat constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)\n- Use as an standalone React Component using props to configure it\n- Use with a global configuration using a React Context Provider\n- Detects automatically the browser language as a default locale\n- Exposes a [React Hook](https://reactjs.org/docs/hooks-overview.html) to update the Provider config\n- Ability to render a number or a currency with any html tag\n- Props match [Intl.NumberFormat constructor arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat#Parameters)\n- [Works in any modern browsers, and IE >= 11](https://caniuse.com/#feat=internationalization)\n\n## Installation\n\n```shell\nnpm i react-intl-number-format\n```\n\n## Usage\n\nThis is the easiest way to use `Number` or `Currency` formatter components:\n\n```js\nimport { Number, Currency } from \"react-intl-number-format\"\n\n// renders 20.000\nconst Foo = () => (\n  <Number locale=\"de-DE\">20000</Number>\n)\n\n// renders $20,000.00\nconst Bar = () => (\n  <Currency locale=\"en-US\" currency=\"USD\">20000</Currency>\n)\n\n// renders $20K\nconst FooBar = () => (\n  <Currency locale=\"en-US\" currency=\"USD\" notation=\"compact\">20130</Currency>\n)\n```\n\nYou don't even need to pass a `locale` prop, by default it will try guess the locale from the browser.\n\n## Recommended usage with a React Context Provider\n\nThe recommended way to use it would be with a [Context.Provider](https://reactjs.org/docs/context.html#contextprovider), 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.\n\nA 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](https://reactjs.org/docs/hooks-overview.html) `useIntl` to be able to [update the formatting configuration for the Provider](https://react-intl-number-format.netlify.com/recipes#change-the-context-provider-configuration-programatically).\n\n```js\n// In your App.js or similar...\nimport { IntlProvider } from \"react-intl-number-format\"\n\nconst intlConfig = {\n  locale: \"en-US\",\n  options: {\n    currency: \"USD\",\n    maximumFractionDigits: 2\n  }\n}\n\nconst App = () => (\n  <IntlProvider config={intlConfig}>\n    ...\n  </IntlProvider>\n)\n\n// In any other part of your code\nimport { Currency } from \"react-intl-number-format\"\n\nconst HelloWorld = () => (\n  // renders $20,000 (based on the provider config)\n  <Currency>20000</Currency>\n)\n```\n\nThe configuration object that `IntlProvider` expects is basically matching [the arguments from Intl.NumberFormat constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat#Parameters).\n\n\n\n","readmeFilename":"README.md"}