# react-i18next documentation

## react-i18next documentation

- [Introduction](https://react.i18next.com/readme.md): react-i18next is the React binding for i18next, maintained by the team that builds Locize, the translation management service for i18next projects.
- [Getting started](https://react.i18next.com/getting-started.md): Install react-i18next and i18next, initialize an instance, and translate your first React component with useTranslation.
- [Drawbacks of other i18n solutions](https://react.i18next.com/guides/the-drawbacks-of-other-i18n-solutions.md): 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.
- [Quick start](https://react.i18next.com/guides/quick-start.md): Add react-i18next to an existing React app in a few steps: install, configure i18next, use the useTranslation hook, and load translation files.
- [Multiple Translation Files](https://react.i18next.com/guides/multiple-translation-files.md): Split translations into namespaces (multiple files), load them lazily, and use them with useTranslation and Trans.
- [Step by step guide](https://react.i18next.com/latest/using-with-hooks.md): Step-by-step guide to react-i18next with hooks: configuration, useTranslation, Trans, language switching and lazy loading.
- [i18next instance](https://react.i18next.com/latest/i18next-instance.md): Configure the i18next instance for react-i18next: initReactI18next, backends, language detection, and multiple instances.
- [useTranslation (hook)](https://react.i18next.com/latest/usetranslation-hook.md): The useTranslation hook: get t and i18n in function components, load namespaces, wait with Suspense, and use keyPrefix.
- [withTranslation (HOC)](https://react.i18next.com/latest/withtranslation-hoc.md): The withTranslation higher-order component: inject t and i18n into class components, with namespaces and Suspense options.
- [Translation (render prop)](https://react.i18next.com/latest/translation-render-prop.md): The Translation render prop: access t and i18n where hooks and HOCs do not fit.
- [Trans Component](https://react.i18next.com/latest/trans-component.md): The Trans component: translate JSX with nested elements, links and variables, the important note on how children are indexed, and the usage samples.
- [IcuTrans Component](https://react.i18next.com/latest/icu-trans-component.md): IcuTrans, the Trans variant for ICU message format, used by the icu.macro Babel macro.
- [I18nextProvider](https://react.i18next.com/latest/i18nextprovider.md): I18nextProvider passes an i18next instance through React context, for multiple instances or server-side setups.
- [SSR (additional components)](https://react.i18next.com/latest/ssr.md): Server-side rendering with react-i18next: Next.js (next-i18next), Remix, Gatsby, one i18next instance per request, and passing initial translations to the client.
- [Migrating v9 to v10](https://react.i18next.com/latest/migrating-v9-to-v10.md): Migrate react-i18next from v9 to v10: the rewrite, renamed exports and the hook-based API.
- [TypeScript](https://react.i18next.com/latest/typescript.md): TypeScript with react-i18next: typed keys and namespaces via i18next's CustomTypeOptions, and the Trans component.
- [Using with ICU format](https://react.i18next.com/misc/using-with-icu-format.md): Use the ICU message format in react-i18next with i18next-icu, including plurals and selects in ICU syntax.
- [Using with fluent format](https://react.i18next.com/misc/using-with-fluent-format.md): Use Fluent (.ftl) translations in react-i18next with i18next-fluent.
- [Testing](https://react.i18next.com/misc/testing.md): Testing components that use react-i18next: export the plain component or test without stubbing, with an example i18next configuration for tests.