{"id":13545139,"url":"https://github.com/globalizejs/react-globalize","last_synced_at":"2025-08-12T17:45:04.869Z","repository":{"id":27709720,"uuid":"31196660","full_name":"globalizejs/react-globalize","owner":"globalizejs","description":"Bringing the i18n functionality of Globalize, backed by CLDR, to React","archived":false,"fork":false,"pushed_at":"2022-12-06T23:40:06.000Z","size":1356,"stargazers_count":108,"open_issues_count":23,"forks_count":20,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-06-11T11:01:11.577Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/globalizejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-23T06:28:49.000Z","updated_at":"2025-05-03T18:10:34.000Z","dependencies_parsed_at":"2023-01-14T07:20:16.540Z","dependency_job_id":null,"html_url":"https://github.com/globalizejs/react-globalize","commit_stats":null,"previous_names":["jquery-support/react-globalize"],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/globalizejs/react-globalize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globalizejs%2Freact-globalize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globalizejs%2Freact-globalize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globalizejs%2Freact-globalize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globalizejs%2Freact-globalize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/globalizejs","download_url":"https://codeload.github.com/globalizejs/react-globalize/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globalizejs%2Freact-globalize/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261807681,"owners_count":23212660,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T11:00:58.140Z","updated_at":"2025-06-25T04:44:43.630Z","avatar_url":"https://github.com/globalizejs.png","language":"JavaScript","readme":"# react-globalize\n\n[React](http://facebook.github.io/react/) components that provide internationalization features via [Globalize](https://github.com/jquery/globalize). With a little initialization, you get instantly internationalized values in your application.\n\n## React versions\n\n| react-globalize | react |\n| --- | --- |\n| 0.x | ^0.14.0, ^0.14.0, ^15.0.0 |\n| 1.x | ^16.0.0 |\n\n## Install\n\n1. `npm install react-globalize --save`\n2. In your application just:\n\t```JS\n\tvar ReactGlobalize = require(\"react-globalize\");\n\tvar Globalize = require(\"globalize\");\n\tvar FormatCurrency = ReactGlobalize.FormatCurrency;\n\n\t// Initialize Globalize and load your CLDR data\n\t// See https://github.com/jquery/globalize for details on Globalize usage\n\n\tGlobalize.locale(\"en\");\n\n\t// Then, to use any ReactGlobalize component (with JSX)\n\tReact.render(\n\t    \u003cFormatCurrency currency=\"USD\"\u003e{150}\u003c/FormatCurrency\u003e\n\t);\n\t// Which would render for example:\n\t// \u003cspan\u003e$150.00\u003c/span\u003e when using the `en` (English) locale, or\n\t// \u003cspan\u003e150,00 $\u003c/span\u003e when using the `de` (German) locale, or\n\t// \u003cspan\u003eUS$150,00\u003c/span\u003e when using the `pt` (Portuguese) locale, or\n\t// \u003cspan\u003eUS$ 150.00\u003c/span\u003e when using the `zh` (Chinese) locale, or\n\t// \u003cspan\u003eUS$ ١٥٠٫٠٠\u003c/span\u003e when using the `ar` (Arabic) locale.\n\t```\n\n3. Further info about each component is available below.\n\n## Components\n\nThese components provide a simple way to display things like currency, dates, numbers and messages, formatted or translated to the current locale set by your application. Each component has a set of props, both required and optional. The component then uses the values of those props to properly format the passed values. Below is a listing of each component, its props and a usage example.\n\n### FormatCurrency\n\nIt allows to format a currency. Your code can be completely independent of the locale conventions for which currency symbol to use, whether or not there's a space between the currency symbol and the value, the side where the currency symbol must be placed, or even decimal digits used by particular currencies. Currencies can be displayed using symbols (the default), accounting form, 3-letter code, or plural messages. See [currencyFormatter][] docs in Globalize for more information.\n\n[currencyFormatter]: https://github.com/jquery/globalize/blob/master/doc/api/currency/currency-formatter.md\n\n#### Children\n\nThe numeric value to be formatted. Required.\n\n#### Props\n\n- **currency** - required\n - A 3-letter string currency code as defined by ISO 4217 (e.g., USD, EUR, CNY, etc).\n- **options**\n - An optional set of options to further format the value. See the [currencyFormatter][] docs in Globalize for more info on specific options\n- **locale** - optional\n - A string value representing the locale (as defined by BCP47) used to override the default locale (preferred) set by your application using `Globalize.locale(locale)` when formatting the amount.\n\n#### Usage\n\nDefault format with USD.\n\n```js\n\u003cFormatCurrency currency=\"USD\"\u003e{150}\u003c/FormatCurrency\u003e\n// Which would render:\n// \u003cspan\u003e$150.00\u003c/span\u003e when using the `en` (English) locale, or\n// \u003cspan\u003eUS$150,00\u003c/span\u003e when using the `pt` (Portuguese) locale.\n```\n\nAccounting format with EUR.\n\n```js\n\u003cFormatCurrency currency=\"EUR\" options={{style: \"accounting\"}}\u003e\n\t{-150}\n\u003c/FormatCurrency\u003e\n// Which would render:\n// \u003cspan\u003e(€150.00)\u003c/span\u003e when using the `en` (English) locale, or\n// \u003cspan\u003e(€150,00)\u003c/span\u003e when using the `pt` (Portuguese) locale.\n```\n\n### FormatDate\n\nIt allows to convert dates and times from their internal representations to textual form in a language-independent manner. Your code can conveniently control the length of the formatted date, time, datetime. See [dateFormatter][] docs in Globalize for more information.\n\n[dateFormatter]: https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md\n\n#### Children\n\nThe date object to be formatted. Required.\n\n#### Props\n\n- **options**\n - An optional set of options which defines how to format the date. See the [dateFormatter][] docs in Globalize for more info on supported patterns\n- **locale** - optional\n - A string value representing the locale (as defined by BCP47) used to override the default locale (preferred) set by your application using `Globalize.locale(locale)` when formatting the amount.\n\n#### Usage\n\nSimple string skeleton.\n\n```js\n\u003cFormatDate options={{skeleton: \"GyMMMd\"}}\u003e\n\t{new Date()}\n\u003c/FormatDate\u003e\n// Which would render:\n// \u003cspan\u003eFeb 27, 2015 AD\u003c/span\u003e when using the `en` (English) locale, or\n// \u003cspan\u003e27 de fev de 2015 d.C.\u003c/span\u003e when using the `pt` (Portuguese) locale.\n```\n\nMedium length date and time.\n\n```js\n\u003cFormatDate options={{datetime: \"medium\"}}\u003e\n\t{new Date()}\n\u003c/FormatDate\u003e\n// Which would render:\n// \u003cspan\u003eFeb 27, 2015, 11:17:10 AM\u003c/span\u003e when using the `en` (English) locale, or\n// \u003cspan\u003e27 de fev de 2015 11:17:10\u003c/span\u003e when using the `pt` (Portuguese) locale.\n```\n\n### FormatMessage\n\nIt allows for the creation of internationalized messages (as defined by the [ICU Message syntax][]), with optional arguments (variables/placeholders) allowing for simple replacement, gender and plural inflections. The arguments can occur in any order, which is necessary for translation into languages with different grammars. See [messageFormatter][] docs in Globalize for more information.\n\n[messageFormatter]: https://github.com/jquery/globalize/blob/master/doc/api/message/message-formatter.md\n[ICU Message syntax]: http://userguide.icu-project.org/formatparse/messages\n\n#### Children\n\nRequired unless the `path` property is set. It's a string with the default message. Either this or the `path` property is required.\n\n#### Props\n\n- **path** - required unless children is set\n - String or array path to traverse a set of messages store in JSON format. Defaults to the message itself defined by the children.\n- **variables** - optional\n - An array (where variables are represented as indeces) or object (for named variables) which contains values for variable replacement within a message.\n- **elements** - optional\n - An object (where element names are represented as keys, and its corresponding element as values) which contains elements replacement within a message.\n- **locale** - optional\n - A string value representing the locale (as defined by BCP47) used to override the default locale (preferred) set by your application using `Globalize.locale(locale)` when formatting the amount.\n\n#### Usage\n\nBelow translation message JSON used in these examples:\n```js\n{\n\t\"pt\": {\n\t\t\"Hi\": \"Oi\",\n\t\t\"Hi, {0} {1} {2}\": \"Olá, {0} {1} {2}\",\n\t\t\"Hello, {first} {middle} {last}\": \"Ei, {first} {middle} {last}\"\n\t}\n}\n```\n\nSimple salutation.\n\n```js\n\u003cFormatMessage\u003eHi\u003c/FormatMessage\u003e\n// Which would render:\n// \u003cspan\u003eHi\u003c/span\u003e when using the default message, in this case `en` (English).\n// \u003cspan\u003eOi\u003c/span\u003e when using the `pt` (Portuguese) locale and its translation messages.\n```\n\nVariable Replacement.\n\n```js\n// Using Array.\n\u003cFormatMessage variables={[\"Wolfgang\", \"Amadeus\", \"Mozart\"]}\u003e\n\t{\"Hi, {0} {1} {2}\"}\n\u003c/FormatMessage\u003e\n// Which would render:\n// \u003cspan\u003eHello, Wolfgang Amadeus Mozart\u003c/span\u003e when using the default message, in this case `en` (English).\n// \u003cspan\u003eHello, Wolfgang Amadeus Mozart\u003c/span\u003e when using the `en` (English) locale and its translation messages.\n\n// Using Object.\n\u003cFormatMessage variables={{first:\"Wolfgang\", middle:\"Amadeus\", last:\"Mozart\"}}\u003e\n  {\"Hey, {first} {middle} {last}\"}\n\u003c/FormatMessage\u003e\n// Which would render:\n// \u003cspan\u003eHey, Wolfgang Amadeus Mozart\u003c/span\u003e when using the default message, in this case `en` (English).\n// \u003cspan\u003eEi, Wolfgang Amadeus Mozart\u003c/span\u003e when using the `pt` (Portuguese) locale and its translation messages.\n```\n\nElement Replacement.\n\n```js\n\u003cFormatMessage\n  elements={{\n    reactGlobalizeLink: \u003ca href='https://github.com/jquery-support/react-globalize'\u003e\u003c/a\u003e\n  }}\n\u003e\n  For more information, see [reactGlobalizeLink]React Globalize[/reactGlobalizeLink]\n\u003c/FormatMessage\u003e\n// Which would render:\n// \u003cspan\u003e\n//   For more information, see \n//   \u003ca href=\"https://github.com/jquery-support/react-globalize\"\u003eReact Globalize\u003c/a\u003e\n// \u003c/span\u003e\n// when using the default message, in this case `en` (English).\n```\n\nSee [messageFormatter][] docs in Globalize for more message examples (e.g., pluralization or gender selection).\n\n### FormatNumber\n\nIt allows to convert numbers into textual representations. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. Though, it can still conveniently control various aspects of the formatted number like the minimum and maximum fraction digits, integer padding, rounding method, display as percentage, and others. See [numberFormatter][] docs in Globalize for more information.\n\n[numberFormatter]: https://github.com/jquery/globalize/blob/master/doc/api/number/number-formatter.md\n\n#### Children\n\nThe number to be formatted. Required.\n\n#### Props\n\n- **options**\n - An optional set of options to further format the value. See the [numberFormatter][] docs in Globalize for more info on specific options\n- **locale** - optional\n - A string value representing the locale (as defined by BCP47) used to override the default locale (preferred) set by your application using `Globalize.locale(locale)` when formatting the amount.\n\n#### Usage\n\nDefault format pi.\n\n```js\n\u003cFormatNumber locale=\"en\"\u003e{Math.PI}\u003c/FormatNumber\u003e\n// Which would render:\n// \u003cspan\u003e3.142\u003c/span\u003e when using the `en` (English) locale, or\n// \u003cspan\u003e3,142\u003c/span\u003e when using the `pt` (Portuguese) locale.\n```\n\nShow at least 2 decimal places.\n\n```js\n\u003cFormatNumber options={{minimumFractionDigits: 2}}\u003e\n\t{10000}\n\u003c/FormatNumber\u003e\n// Which would render:\n// \u003cspan\u003e10,000.00\u003c/span\u003e when using the `en` (English) locale, or\n// \u003cspan\u003e10.000,00\u003c/span\u003e when using the `pt` (Portuguese) locale.\n```\n\n## Development\n\n### Testing\n\n```\nnpm test\n```\n\n### Release process\n\nUpdate package.json version, commit, and merge it into `master`.\n\nOn master, run:\n\n```\nVER=\u003cversion\u003e # e.g., \"1.0.1\"\ngit checkout --detach \u0026\u0026\nnpm run build \u0026\u0026\ngit add -f dist/* \u0026\u0026\ngit commit -a -m Build \u0026\u0026\ngit tag -a -m v$VER v$VER\n```\n\nVerify the tag and:\n\n```\ngit push --tags origin \u0026\u0026\nnpm publish\n```\n\n## License\n\nThis project is distributed under the [MIT license](https://www.tldrlegal.com/l/mit).\n","funding_links":[],"categories":["Utilities"],"sub_categories":["i18n"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglobalizejs%2Freact-globalize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglobalizejs%2Freact-globalize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglobalizejs%2Freact-globalize/lists"}