{"id":15572890,"url":"https://github.com/sealninja/react-i18nify","last_synced_at":"2025-05-15T13:06:31.961Z","repository":{"id":35044254,"uuid":"53423192","full_name":"sealninja/react-i18nify","owner":"sealninja","description":"Simple i18n translation and localization components and helpers for React.","archived":false,"fork":false,"pushed_at":"2025-05-10T05:31:19.000Z","size":3988,"stargazers_count":154,"open_issues_count":6,"forks_count":32,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-10T06:25:25.108Z","etag":null,"topics":["flux","i18n","javascript","localization","react","redux","translation"],"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/sealninja.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-03-08T15:31:10.000Z","updated_at":"2025-05-10T05:31:21.000Z","dependencies_parsed_at":"2023-12-25T07:30:24.325Z","dependency_job_id":"2eb52ee9-a59f-432b-a7a0-6aac6cd6079c","html_url":"https://github.com/sealninja/react-i18nify","commit_stats":{"total_commits":819,"total_committers":17,"mean_commits":48.1764705882353,"dds":"0.41758241758241754","last_synced_commit":"a29296ce9cf7c91b24b3f567542bdfaef9447ef3"},"previous_names":["jsxmachina/react-i18nify"],"tags_count":133,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sealninja%2Freact-i18nify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sealninja%2Freact-i18nify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sealninja%2Freact-i18nify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sealninja%2Freact-i18nify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sealninja","download_url":"https://codeload.github.com/sealninja/react-i18nify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"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":["flux","i18n","javascript","localization","react","redux","translation"],"created_at":"2024-10-02T18:07:42.245Z","updated_at":"2025-05-15T13:06:31.915Z","avatar_url":"https://github.com/sealninja.png","language":"JavaScript","funding_links":[],"categories":["📦 Libraries"],"sub_categories":["React / React Native"],"readme":"# React I18nify\n\nSimple i18n translation and localization components and helpers for React.\n\n[![NPM version](https://img.shields.io/npm/v/react-i18nify.svg?style=flat-square)](https://npmjs.org/package/react-i18nify)\n[![Downloads](https://img.shields.io/npm/dm/react-i18nify.svg?style=flat-square)](https://npmjs.org/package/react-i18nify)\n\nA working example of this package can be found [here at RunKit](https://runkit.com/npm/react-i18nify).\n\n## Migration guide\n\n### Upgrading to v6\n\n`react-i18nify` v6 uses `dayjs` for date localization instead of `date-fns`, to make `react-i18nify` smaller and simpler to use. Migrating to this version requires the following changes to your project:\n\n- Replace locale imports. E.g., `import nl from 'date-fns/locale/nl';` needs to be replaced with `import 'dayjs/locale/nl';`\n- Remove calls to `addLocale` and `addLocales`, these are not needed anymore.\n- Update date formatting strings. For example, `MM-dd-yyyy` is now `MM-DD-YYYY`. See for more information the [day.js documentation](https://day.js.org/docs/en/display/format).\n\nThe v5 documentation can still be found [here](https://github.com/sealninja/react-i18nify/blob/v5/README.md).\n\n## Installation\n\nInstall by using npm:\n\n```\nnpm i react-i18nify\n```\n\n## Getting started\n\nStart by setting the translations and locale to be used:\n\n```javascript\nimport { setTranslations, setLocale } from 'react-i18nify';\n\nsetTranslations({\n  en: {\n    application: {\n      title: 'Awesome app with i18n!',\n      hello: 'Hello, %{name}!'\n    },\n    date: {\n      long: 'MMMM do, yyyy'\n    },\n    export: 'Export %{count} items',\n    export_0: 'Nothing to export',\n    export_1: 'Export %{count} item',\n    two_lines: \u003cdiv\u003eLine 1\u003cbr /\u003eLine 2\u003cdiv\u003e\n  },\n  nl: {\n    application: {\n      title: 'Toffe app met i18n!',\n      hello: 'Hallo, %{name}!'\n    },\n    date: {\n      long: 'd MMMM yyyy'\n    },\n    export: 'Exporteer %{count} dingen',\n    export_0: 'Niks te exporteren',\n    export_1: 'Exporteer %{count} ding',\n    two_lines: \u003cdiv\u003eRegel 1\u003cbr /\u003eRegel 2\u003c/div\u003e\n  }\n});\n\nsetLocale('nl');\n```\n\nNow you're all set up to unleash the power of `react-i18nify`!\n\n## Components\n\nThe easiest way to translate or localize in your React application is by using the `Translate` and `Localize` components:\n\n```javascript\nimport { Translate, Localize } from 'react-i18nify';\n\n\u003cTranslate value=\"application.title\" /\u003e\n  // =\u003e Toffe app met i18n!\n\u003cTranslate value=\"application.hello\" name=\"Aad\" /\u003e\n  // =\u003e Hallo, Aad!\n\u003cTranslate value=\"export\" count={1} /\u003e\n  // =\u003e Exporteer 1 ding\n\u003cTranslate value=\"export\" count={2} /\u003e\n  // =\u003e Exporteer 2 dingen\n\u003cTranslate value=\"two_lines\" /\u003e\n  // =\u003e \u003cdiv\u003eRegel 1\u003cbr /\u003eRegel 2\u003c/div\u003e\n\n\u003cLocalize value=\"07-2016-04\" dateFormat=\"date.long\" parseFormat=\"dd-yyyy-MM\" /\u003e\n  // =\u003e 7 april 2016\n\u003cLocalize value=\"2015-09-03\" dateFormat=\"date.long\" /\u003e\n  // =\u003e 3 september 2015\n\u003cLocalize value=\"2015-09-03\" dateFormat=\"distance-to-now\" /\u003e\n  // =\u003e 7 jaar geleden\n\u003cLocalize value={10/3} options={{style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2}} /\u003e\n  // =\u003e € 3,33\n```\n\n## Helpers\n\nIf for some reason, you cannot use the components, you can use the `translate` and `localize` helpers instead:\n\n```javascript\nimport { translate, localize } from 'react-i18nify';\n\ntranslate('application.title');\n// =\u003e Toffe app met i18n!\ntranslate('application.hello', { name: 'Aad' });\n// =\u003e Hallo, Aad!'\ntranslate('export', { count: 0 });\n// =\u003e Niks te exporteren\ntranslate('application.unknown_translation');\n// =\u003e unknown_translation\ntranslate('application', { name: 'Aad' });\n// =\u003e {hello: 'Hallo, Aad!', title: 'Toffe app met i18n!'}\n\nlocalize(1385856000000, { dateFormat: 'date.long' });\n// =\u003e 1 december 2013\nlocalize(Math.PI, { maximumFractionDigits: 2 });\n// =\u003e 3,14\nlocalize('huh', { dateFormat: 'date.long' });\n// =\u003e null\n```\n\nIf you want these helpers to be re-rendered automatically when the locale or translations change, you have to wrap them in a `\u003cI18n\u003e` component using its `render` prop:\n\n```javascript\nimport { I18n, translate } from 'react-i18nify';\n\n\u003cI18n render={() =\u003e \u003cinput placeholder={translate('application.title')} /\u003e} /\u003e;\n```\n\n## Date localization\n\n`react-i18nify` uses [day.js](https://github.com/iamkun/dayjs/) internally to handle date localization. To reduce the base bundle size, `day.js` localizations are not loaded by default. If you need date localization, you can manually import them. For a list of available locales, refer to the [day.js list of locales](https://github.com/iamkun/dayjs/tree/dev/src/locale).\n\n```javascript\nimport 'dayjs/locale/en';\nimport 'dayjs/locale/nl';\nimport 'dayjs/locale/it';\n```\n\n## API Reference\n\n### `\u003cTranslate\u003e`\n\nReact translate component, with the following props:\n\n- `value` (string)\n\nThe translation key to translate.\n\n- Other props\n\nAll other provided props will be used as replacements for the translation.\n\n### `\u003cLocalize\u003e`\n\nReact localize component, with the following props:\n\n- `value` (number|string|object)\n\nThe number or date to localize.\n\n- `dateFormat` (string)\n\nThe translation key for providing the format string. Only needed for localizing dates.\nFor the full list of formatting tokens which can be used in the format string, see the [day.js documentation](https://day.js.org/docs/en/display/format).\n\n- `parseFormat` (string)\n\nAn optional formatting string for parsing the value when localizing dates.\nFor the full list of formatting tokens which can be used in the parsing string, see the [day.js documentation](https://day.js.org/docs/en/parse/string-format).\n\n- `options` (object)\n\nWhen localizing numbers, the localize component supports all options as provided by the Javascript built-in `Intl.NumberFormat` object.\nFor the full list of options, see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat.\n\n### `\u003cI18n\u003e`\n\nReact I18n wrapper component, with the following prop:\n\n- `render` (func)\n\nThe return value of the provide function will be rendered and automatically re-render when the locale or translations change.\n\n### `setLocale(locale, rerenderComponents = true)`\n\nThe used locale can be set with this function. By default, changing the locale will re-render all components.\nThis behavior can be prevented by providing `false` as a second argument.\n\n### `getLocale()`\n\nGet the currently used locale.\n\n### `setTranslations(translations, rerenderComponents = true)`\n\nThe used translations can be set with this function. By default, changing the translations will re-render all components.\nThis behavior can be prevented by providing `false` as a second argument.\n\n### `getTranslations()`\n\nGet the currently used translations.\n\n### `setLocaleGetter(fn)`\n\nAlternatively to using `setLocale`, you can provide a callback to return the locale with `setLocaleGetter`:\n\n```javascript\nimport { setLocaleGetter } from 'react-i18nify';\n\nconst localeFunction = () =\u003e 'nl';\n\nsetLocaleGetter(localeFunction);\n```\n\n### `setTranslationsGetter(fn)`\n\nAlternatively to using `setTranslations`, you can provide a callback to return the translations with `setTranslationsGetter`:\n\n```javascript\nimport { setTranslationsGetter } from 'react-i18nify';\n\nconst translationsFunction = () =\u003e ({\n  en: { ... },\n  nl: { ... }\n});\n\nsetTranslationsGetter(translationsFunction);\n```\n\n### `setHandleMissingTranslation(fn)`\n\nBy default, when a translation is missing, the translation key will be returned in a slightly formatted way,\nas can be seen in the `translate('application.unknown_translation');` example above.\nYou can however overwrite this behavior by setting a function to handle missing translations.\n\n```javascript\nimport { setHandleMissingTranslation, translate } from 'react-i18nify';\n\nsetHandleMissingTranslation((key, replacements, options, err) =\u003e `Missing translation: ${key}`);\n\ntranslate('application.unknown_translation');\n// =\u003e Missing translation: application.unknown_translation\n```\n\n### `setHandleFailedLocalization(fn)`\n\nBy default, when a localization failed, `null` will be returned,\nas can be seen in the `localize('huh', { dateFormat: 'date.long' });` example above.\nYou can however overwrite this behavior by setting a function to handle failed localizations.\n\n```javascript\nimport { setHandleFailedLocalization, localize } from 'react-i18nify';\n\nsetHandleFailedLocalization((value, options, err) =\u003e `Failed localization: ${value}`);\n\nlocalize('huh', { dateFormat: 'date.long' });\n// =\u003e Failed localization: huh\n```\n\n### `translate(key, replacements = {})`\n\nHelper function to translate a `key`, given an optional set of `replacements`. See the above Helpers section for examples.\n\n### `localize(value, options)`\n\nHelper function to localize a `value`, given a set of `options`. See the above Helpers section for examples.\n\nFor localizing dates, the `day.js` library is used.\nA `dateFormat` option can be used for providing a translation key with the format string.\nFor the full list of formatting tokens which can be used in the format string, see the [day.js documentation](https://day.js.org/docs/en/display/format).\nMoreover, `parseFormat` option can be used for providing a formatting string for parsing the value.\nFor the full list of formatting tokens which can be used in the parsing string, see the [day.js documentation](https://day.js.org/docs/en/parse/string-format).\n\nFor number formatting, the localize helper supports all options as provided by the Javascript built-in `Intl.NumberFormat` object.\nFor the full list of options, see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat.\n\n### `t(key, replacements = {})`\n\nAlias for `translate`.\n\n### `l(value, options)`\n\nAlias for `localize`.\n\n### `forceComponentsUpdate()`\n\nThis function can be called to force a re-render of all I18n components.\n\n## Example application with SSR\n\nAn example application with server-side rendering using features of `react-i18nify` can be found at https://github.com/sealninja/react-ssr-example.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsealninja%2Freact-i18nify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsealninja%2Freact-i18nify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsealninja%2Freact-i18nify/lists"}