{"_id":"@cosier/ra-i18n-i18next","name":"@cosier/ra-i18n-i18next","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cosier/ra-i18n-i18next","version":"1.0.0","description":"i18next i18n provider for react-admin","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/cjs/index.d.ts","sideEffects":false,"authors":["François Zaninotto"],"repository":{"type":"git","url":"git+https://github.com/marmelab/react-admin.git"},"homepage":"https://github.com/marmelab/react-admin#readme","bugs":{"url":"https://github.com/marmelab/react-admin/issues"},"license":"MIT","scripts":{"build":"yarn run build-cjs && yarn run build-esm","build-cjs":"rimraf ./dist/cjs && tsc --outDir dist/cjs","build-esm":"rimraf ./dist/esm && tsc --outDir dist/esm --module es2015","watch":"tsc --outDir dist/esm --module es2015 --watch"},"dependencies":{"i18next":"^23.5.1","lodash":"^4.17.21","@cosier/ra-core":"^1.0.10.0","react-i18next":"^14.1.1"},"devDependencies":{"cross-env":"^5.2.0","i18next-resources-to-backend":"^1.1.4","@cosier/ra-language-english":"^1.0.10.0","@cosier/ra-language-french":"^1.0.10.0","rimraf":"^3.0.2","typescript":"^5.1.3"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"gitHead":"587df4c27bfcec4a756df4f95e5fc14728dfc0d7","_id":"@cosier/ra-i18n-i18next@1.0.0","_nodeVersion":"24.6.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-HXICEipqBPv3XGeDDj0+EVPI5ihY/PhU9hwwpeaVGNYInjHE77O1Wy9BaMrM1Xol6bdIsjsRYvJQ4XY9S34aBQ==","shasum":"4d42b2a9ada1978223b473ac12556ca9f941c33c","tarball":"https://registry.npmjs.org/@cosier/ra-i18n-i18next/-/ra-i18n-i18next-1.0.0.tgz","fileCount":10,"unpackedSize":31091,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEVRcZnMaYy4hAOL2/kvwLr6H0Ko7h57anZelhxBGrnpAiEAxUie/x55APBvMG5tqX+UZOk7d9BDtNXvl6bhIOMh04M="}]},"_npmUser":{"name":"cosier","email":"bailey@cosier.ca"},"directories":{},"maintainers":[{"name":"cosier","email":"bailey@cosier.ca"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ra-i18n-i18next_1.0.0_1756488600748_0.3453605231460777"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-29T17:30:00.642Z","1.0.0":"2025-08-29T17:30:00.966Z","modified":"2025-08-29T17:30:01.295Z"},"maintainers":[{"name":"cosier","email":"bailey@cosier.ca"}],"description":"i18next i18n provider for react-admin","homepage":"https://github.com/marmelab/react-admin#readme","repository":{"type":"git","url":"git+https://github.com/marmelab/react-admin.git"},"bugs":{"url":"https://github.com/marmelab/react-admin/issues"},"license":"MIT","readme":"# i18next i18n provider for react-admin\n\n[i18next](https://www.i18next.com/) adapter for [react-admin](https://github.com/marmelab/react-admin), the frontend framework for building admin applications on top of REST/GraphQL services.\n\nYou might prefer this package over `ra-i18n-polyglot` when:\n\n- you already use i18next services such as [locize](https://locize.com/)\n- you want more control on how you organize translations, leveraging [multiple files and namespaces](https://www.i18next.com/principles/namespaces)\n- you want more control on how you [load translations](https://www.i18next.com/how-to/add-or-load-translations)\n- you want to use features not available in Polyglot such as:\n  - [advanced formatting](https://www.i18next.com/translation-function/formatting);\n  - [nested translations](https://www.i18next.com/translation-function/nesting)\n  - [context](https://www.i18next.com/translation-function/context)\n\n## Installation\n\n```sh\nnpm install --save ra-i18n-i18next\n```\n\n## Usage\n\n```tsx\nimport { Admin } from 'react-admin';\nimport { useI18nextProvider, convertRaTranslationsToI18next } from 'ra-i18n-i18next';\nimport englishMessages from 'ra-language-english';\n\nconst App = () => {\n    const i18nProvider = useI18nextProvider({\n        options: {\n            resources: {\n                en: {\n                    translation: convertRaTranslationsToI18next(englishMessages)\n                }\n            }\n        }\n    });\n    if (!i18nProvider) return (<div>Loading...</div>);\n\n    return (\n        <Admin i18nProvider={i18nProvider}>\n           ...\n        </Admin>\n    );\n};\n```\n\n## API\n\n### `useI18nextProvider` hook\n\nA hook that returns an i18nProvider for react-admin applications, based on i18next.\n\nYou can provide your own i18next instance but don't initialize it, the hook will do it for you with the options you may provide. Besides, this hook already adds the `initReactI18next` plugin to i18next.\n\n#### Usage\n\n```tsx\nimport { Admin } from 'react-admin';\nimport { useI18nextProvider, convertRaTranslationsToI18next } from 'ra-i18n-i18next';\nimport englishMessages from 'ra-language-english';\n\nconst App = () => {\n    const i18nProvider = useI18nextProvider({\n        options: {\n            resources: {\n                en: {\n                    translation: convertRaTranslationsToI18next(englishMessages)\n                }\n            }\n        }\n    });\n    if (!i18nProvider) return (<div>Loading...</div>);\n\n    return (\n        <Admin i18nProvider={i18nProvider}>\n           ...\n        </Admin>\n    );\n};\n```\n\n#### Parameters\n\n| Parameter            | Required | Type        | Default | Description                                                      |\n| -------------------- | -------- | ----------- | ------- | ---------------------------------------------------------------- |\n| `i18nextInstance`    | Optional | I18n        |         | Your own i18next instance. If not provided, one will be created. |\n| `options`            | Optional | InitOptions |         | The options passed to the i18next init function                  |\n| `availableLocales`   | Optional | Locale[]    |         | An array describing the available locales. Used to automatically include the locale selector menu in the default react-admin AppBar |\n\n##### `i18nextInstance`\n\nThis parameter lets you pass your own instance of i18next, allowing you to customize its plugins such as the backends.\n\n```tsx\nimport { Admin } from 'react-admin';\nimport { useI18nextProvider } from 'ra-i18n-i18next';\nimport i18n from 'i18next';\nimport Backend from 'i18next-http-backend';\nimport LanguageDetector from 'i18next-browser-languagedetector';\n\nconst App = () => {\n    const i18nextInstance = i18n\n        .use(Backend)\n        .use(LanguageDetector);\n\n    const i18nProvider = useI18nextProvider({\n        i18nextInstance\n    });\n\n    if (!i18nProvider) return (<div>Loading...</div>);\n\n    return (\n        <Admin i18nProvider={i18nProvider}>\n           ...\n        </Admin>\n    );\n};\n```\n\n##### `options`\n\nThis parameter lets you pass your own options for the i18n `init` function.\n\nPlease refer to [the i18next documentation](https://www.i18next.com/overview/configuration-options) for details.\n\n```tsx\nimport { Admin } from 'react-admin';\nimport { useI18nextProvider } from 'ra-i18n-i18next';\nimport i18n from 'i18next';\n\nconst App = () => {\n    const i18nProvider = useI18nextProvider({\n        options: {\n            debug: true,\n        }\n    });\n\n    if (!i18nProvider) return (<div>Loading...</div>);\n\n    return (\n        <Admin i18nProvider={i18nProvider}>\n           ...\n        </Admin>\n    );\n};\n```\n\n#### `availableLocales`\n\nThis parameter lets you provide the list of available locales for your application. This is used by the default react-admin AppBar to detect whether to display a locale selector.\n\n```tsx\nimport { Admin } from 'react-admin';\nimport { useI18nextProvider, convertRaTranslationsToI18next } from 'ra-i18n-i18next';\nimport i18n from 'i18next';\nimport resourcesToBackend from 'i18next-resources-to-backend';\n\nconst App = () => {\n    const i18nextInstance = i18n.use(\n        // Here we use a Backend provided by i18next that allows us to load\n        // the translations however we want.\n        // See https://www.i18next.com/how-to/add-or-load-translations#lazy-load-in-memory-translations\n        resourcesToBackend(language => {\n            if (language === 'fr') {\n                // Load the ra-language-french package and convert its translations in i18next format\n                return import(\n                    `ra-language-french`\n                ).then(({ default: messages }) =>\n                    convertRaTranslationsToI18next(messages)\n                );\n            }\n            // Load the ra-language-english package and convert its translations in i18next format\n            return import(`ra-language-english`).then(({ default: messages }) =>\n                convertRaTranslationsToI18next(messages)\n            );\n        })\n    );\n\n    const i18nProvider = useI18nextProvider({\n        i18nextInstance,\n        availableLocales: [\n            { locale: 'en', name: 'English' },\n            { locale: 'fr', name: 'French' },\n        ],\n    });\n\n    if (!i18nProvider) return (<div>Loading...</div>);\n\n    return (\n        <Admin i18nProvider={i18nProvider}>\n           ...\n        </Admin>\n    );\n};\n```\n\n### `convertRaTranslationsToI18next` function\n\nA function that takes translations from a standard react-admin language package and converts them to i18next format.\nIt transforms the following:\n\n- interpolations wrappers from `%{foo}` to `{{foo}}` unless a prefix and/or a suffix are provided\n- pluralization messages from a single key containing text like `\"key\": \"foo |||| bar\"` to multiple keys `\"foo_one\": \"foo\"` and `\"foo_other\": \"bar\"`\n\n#### Usage\n\n```ts\nimport englishMessages from 'ra-language-english';\nimport { convertRaTranslationsToI18next } from 'ra-i18n-18next';\n\nconst messages = convertRaTranslationsToI18next(englishMessages);\n```\n\n#### Parameters\n\n| Parameter            | Required | Type        | Default | Description                                                      |\n| -------------------- | -------- | ----------- | ------- | ---------------------------------------------------------------- |\n| `raMessages`         | Required | object      |         | An object containing standard react-admin translations such as provided by ra-language-english |\n| `options`            | Optional | object      |         | An object providing custom interpolation suffix and/or suffix |\n\n##### `options`\n\nIf you provided interpolation options to your i18next instance, you should provide them when calling this function:\n\n```ts\nimport englishMessages from 'ra-language-english';\nimport { convertRaTranslationsToI18next } from 'ra-i18n-18next';\n\nconst messages = convertRaTranslationsToI18next(englishMessages, {\n   prefix: '#{',\n  suffix: '}#',\n});\n```\n","readmeFilename":"README.md","_rev":"1-71167a97589035c32c8fdcb44d7ac7dc"}