# React I18Next

> react-i18next can be added to your project using **npm**:

## Pages

- [Getting started](getting-started.md): react-i18next can be added to your project using **npm**:
- [i18next instance](i18next-instance.md): The instance is an initialized i18next instance. In the following code snippet, we add a backend to load translations...
- [I18nextProvider](i18nextprovider.md): The I18nextProvider does take an i18next instance via prop i18n and passes that down using the context API.
- [IcuTrans Component](icu-trans-component.md): This component is an alternative component to [`Trans`](https://react.i18next.com/latest/trans-component) which is de...
- [Interpolate (v9)](interpolate.md): {% hint style="danger" %}
- [Migrating v9 to v10](migrating-v9-to-v10.md): v10 is a complete rewrite, taking the chance to clean up some complexity added from v1 to v9.
- [Multiple Translation Files](multiple-translation-files.md): One of the advantages of react-i18next is based on i18next it supports the separation of translations into multiple f...
- [NamespacesConsumer (v9)](namespacesconsumer.md): {% hint style="info" %}
- [Overview (v9)](overview.md): react-i18next depends on i18next to provide the localization features. So there are two main things flowing through y...
- [Quick start](quick-start.md): We expect you having an existing react application - if not give [Vite](https://vite.dev/guide/#scaffolding-your-firs...
- [SSR (v9)](serverside-rendering.md): You should have a look at [next-i18next](https://github.com/isaachinman/next-i18next) which extends react-i18next to ...
- [SSR (additional components)](ssr.md): Then check out [this article](https://www.locize.com/blog/i18n-next-app-router) describing how to best internationali...
- [Step by step guide (v9)](step-by-step-guide.md): {% hint style="warning" %}
- [Testing](testing.md): For testing purpose of your component you should export the pure component without extending with the withTranslation...
- [Drawbacks of other i18n solutions](the-drawbacks-of-other-i18n-solutions.md): Let's make the sample using our own base i18n framework [i18next](https://i18next.com). Like all other solutions, som...
- [Trans Component](trans-component.md): {% hint style="success" %}
- [Translation (render prop)](translation-render-prop.md): The`Translation`is a render prop and gets the`t`function and`i18n`instance to your component.
- [TypeScript](typescript.md): {% hint style="warning" %}
- [useTranslation (hook)](usetranslation-hook.md): It gets the`t`function and`i18n`instance inside your functional component.
- [Using with fluent format](using-with-fluent-format.md): i18next itself is flexible enough to support multiple existing i18next formats beside it's own.
- [Step by step guide](using-with-hooks.md): We expect you to have an existing react application supporting [hooks](https://reactjs.org/docs/hooks-intro.html) (at...
- [Using with ICU format](using-with-icu-format.md): i18next itself is flexible enough to support multiple existing i18next formats beside its own. So also the ICU format...
- [withI18n (v9)](withi18n.md): {% hint style="info" %}
- [withNamespaces (v9)](withnamespaces.md): {% hint style="info" %}
- [withTranslation (HOC)](withtranslation-hoc.md): The`withTranslation`is a classic HOC (higher order component) and gets the`t`function and`i18n`instance inside ...