{"version":1,"pages":[{"id":"-L9iS6Wn3NyImoycW1pV","title":"Introduction","pathname":"/","siteSpaceId":"sitesp_Rbfi6","description":"react-i18next is the React binding for i18next, maintained by the team that builds Locize, the translation management service for i18next projects."},{"id":"-L9iS81MtLe0-ZcTqBNl","title":"Getting started","pathname":"/getting-started","siteSpaceId":"sitesp_Rbfi6","description":"Install react-i18next and i18next, initialize an instance, and translate your first React component with useTranslation."},{"id":"-LP7Md2HCI7lqs_i0WMO","title":"Drawbacks of other i18n solutions","pathname":"/guides/the-drawbacks-of-other-i18n-solutions","siteSpaceId":"sitesp_Rbfi6","description":"What react-i18next does differently from other React i18n solutions: changing the language at runtime, splitting translations into files, and translating mixed JSX in one sentence.","breadcrumbs":[{"label":"Guides"}]},{"id":"-LPHBzfb-kHTI8QUQTqs","title":"Quick start","pathname":"/guides/quick-start","siteSpaceId":"sitesp_Rbfi6","description":"Add react-i18next to an existing React app in a few steps: install, configure i18next, use the useTranslation hook, and load translation files.","breadcrumbs":[{"label":"Guides"}]},{"id":"-LYGLmq-OW_D-AC5zbbk","title":"Multiple Translation Files","pathname":"/guides/multiple-translation-files","siteSpaceId":"sitesp_Rbfi6","description":"Split translations into namespaces (multiple files), load them lazily, and use them with useTranslation and Trans.","breadcrumbs":[{"label":"Guides"}]},{"id":"-LPjW4Bq56rBDVE5lCjv","title":"Step by step guide","pathname":"/latest/using-with-hooks","siteSpaceId":"sitesp_Rbfi6","description":"Step-by-step guide to react-i18next with hooks: configuration, useTranslation, Trans, language switching and lazy loading.","breadcrumbs":[{"label":"latest"}]},{"id":"-LY28rBjmtmzCiR7yfwA","title":"i18next instance","pathname":"/latest/i18next-instance","siteSpaceId":"sitesp_Rbfi6","description":"Configure the i18next instance for react-i18next: initReactI18next, backends, language detection, and multiple instances.","breadcrumbs":[{"label":"latest"}]},{"id":"-LY1o02lojsY0aqtp6sZ","title":"useTranslation (hook)","pathname":"/latest/usetranslation-hook","siteSpaceId":"sitesp_Rbfi6","description":"The useTranslation hook: get t and i18n in function components, load namespaces, wait with Suspense, and use keyPrefix.","breadcrumbs":[{"label":"latest"}]},{"id":"-LY1wia9CiUfuE9CmFny","title":"withTranslation (HOC)","pathname":"/latest/withtranslation-hoc","siteSpaceId":"sitesp_Rbfi6","description":"The withTranslation higher-order component: inject t and i18n into class components, with namespaces and Suspense options.","breadcrumbs":[{"label":"latest"}]},{"id":"-LY1yrnb5kkl_S5ukzaD","title":"Translation (render prop)","pathname":"/latest/translation-render-prop","siteSpaceId":"sitesp_Rbfi6","description":"The Translation render prop: access t and i18n where hooks and HOCs do not fit.","breadcrumbs":[{"label":"latest"}]},{"id":"-LY2DIN9rfhmF1Wk64Ak","title":"Trans Component","pathname":"/latest/trans-component","siteSpaceId":"sitesp_Rbfi6","description":"The Trans component: translate JSX with nested elements, links and variables, the important note on how children are indexed, and the usage samples.","breadcrumbs":[{"label":"latest"}]},{"id":"WqU95znRoorza9UvfDUJ","title":"IcuTrans Component","pathname":"/latest/icu-trans-component","siteSpaceId":"sitesp_Rbfi6","description":"IcuTrans, the Trans variant for ICU message format, used by the icu.macro Babel macro.","breadcrumbs":[{"label":"latest"}]},{"id":"-LY1mLksEGyPqcBYbniw","title":"I18nextProvider","pathname":"/latest/i18nextprovider","siteSpaceId":"sitesp_Rbfi6","description":"I18nextProvider passes an i18next instance through React context, for multiple instances or server-side setups.","breadcrumbs":[{"label":"latest"}]},{"id":"-LY2AB4CJoMhutiZpxzP","title":"SSR (additional components)","pathname":"/latest/ssr","siteSpaceId":"sitesp_Rbfi6","description":"Server-side rendering with react-i18next: Next.js (next-i18next), Remix, Gatsby, one i18next instance per request, and passing initial translations to the client.","breadcrumbs":[{"label":"latest"}]},{"id":"-LY6LoFtJddHSPweEdCF","title":"Migrating v9 to v10","pathname":"/latest/migrating-v9-to-v10","siteSpaceId":"sitesp_Rbfi6","description":"Migrate react-i18next from v9 to v10: the rewrite, renamed exports and the hook-based API.","breadcrumbs":[{"label":"latest"}]},{"id":"-MSWnLCkAPjbHw5i0zYL","title":"TypeScript","pathname":"/latest/typescript","siteSpaceId":"sitesp_Rbfi6","description":"TypeScript with react-i18next: typed keys and namespaces via i18next's CustomTypeOptions, and the Trans component.","breadcrumbs":[{"label":"latest"}]},{"id":"-LIeJuNCJIR3MSSnLTUZ","title":"Using with ICU format","pathname":"/misc/using-with-icu-format","siteSpaceId":"sitesp_Rbfi6","description":"Use the ICU message format in react-i18next with i18next-icu, including plurals and selects in ICU syntax.","breadcrumbs":[{"label":"Misc"}]},{"id":"-LNf8QTBqBHzWiiVx9hL","title":"Using with fluent format","pathname":"/misc/using-with-fluent-format","siteSpaceId":"sitesp_Rbfi6","description":"Use Fluent (.ftl) translations in react-i18next with i18next-fluent.","breadcrumbs":[{"label":"Misc"}]},{"id":"-L9iS81ZaiyqSvxRxgcA","title":"Testing","pathname":"/misc/testing","siteSpaceId":"sitesp_Rbfi6","description":"Testing components that use react-i18next: export the plain component or test without stubbing, with an example i18next configuration for tests.","breadcrumbs":[{"label":"Misc"}]}]}