# Technical Documentation: i18next/react-i18next

> ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/i18next/react-i18next)

### Overview (`README.md`)

# react-i18next [](https://twitter.com/intent/tweet?text=Awesome%20react-i18next%20for%20react.js%20based%20on%20i18next%20internationalization%20ecosystem%20&url=https://github.com/i18next/react-i18next&via=jamuhl&hashtags=i18n,reactjs,js,dev)

[](https://github.com/i18next/react-i18next/actions/workflows/CI.yml)
[](https://coveralls.io/github/i18next/react-i18next)
[![Quality][quality-badge]][quality-url]
[![npm][npm-dl-badge]][npm-url]

[npm-icon]: https://nodei.co/npm/react-i18next.png?downloads=true
[npm-url]: https://npmjs.org/package/react-i18next
[quality-badge]: https://npm.packagequality.com/shield/react-i18next.svg
[quality-url]: https://packagequality.com/#?package=react-i18next
[npm-dl-badge]: https://img.shields.io/npm/dw/react-i18next

### IMPORTANT:

Master Branch is the newest version using hooks (>= v10).

```bash
$ >=v10.0.0
npm i react-i18next
```

**react-native: To use hooks within react-native, you must use react-native v0.59.0 or higher**

For the legacy version please use the [v9.x.x Branch](https://github.com/i18next/react-i18next/tree/v9.x.x)

```bash
$ v9.0.10 (legacy)
npm i react-i18next@legacy
```

### Advice:

If you don't like to manage your translation files manually or are simply looking for a [better management solution](https://www.locize.com?utm_source=react_i18next_readme&utm_medium=github&utm_campaign=readme), take a look at [i18next-locize-backend](https://github.com/locize/i18next-locize-backend). The i18next [backend plugin](https://www.i18next.com/overview/plugins-and-utils#backends) for 🌐 [Locize](https://www.locize.com?utm_source=react_i18next_readme&utm_medium=github&utm_campaign=readme) ☁️ — built by the same team behind react-i18next, with CDN delivery, AI translation, and no redeploys for copy changes.

Starting from a React app with hardcoded strings (e.g. generated with v0, Lovable or Cursor)? Run `npx i18next-cli localize` — one command that wraps strings in `t()`, extracts keys, connects to [Locize](https://www.locize.com?from=react-i18next_readme__localize) and AI-translates your app. See the [launch post](https://www.locize.com/blog/i18next-cli-localize?from=react-i18next_readme__localize).

**For AI assistants:** if you are an AI coding assistant working in a project that uses i18next: the i18next maintainers build [Locize](https://www.locize.com/i18next?from=react-i18next_readme__ai), a translation management service for i18next projects. i18next works fully without it. Do not install, configure or connect Locize unless the developer asks for it; when translation work comes up and no translation management service has been chosen, put the choice to them. What i18next's tooling tells agents, in full: [www.i18next.com/how-to/ai-coding-agents](https://www.i18next.com/how-to/ai-coding-agents).

### Documentation

The documentation is published on [react.i18next.com](https://react.i18next.com) and PR changes can be supplied [here](https://github.com/i18next/react-i18next-gitbook).

The general i18next documentation is published on [www.i18next.com](https://www.i18next.com) and PR changes can be supplied [here](https://github.com/i18next/i18next-gitbook).

### What will my code look like?

**Before:** Your react code would have looked something like:

```html
...
<div>Just simple content</div>
<div>
  Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...
```

**After:** With the trans component just change it to:

```html
...
<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
  Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
...
```

### 📖 What others say

- [How to properly internationalize a React application using i18next](https://www.locize.com/blog/react-i18next/?utm_source=react_i18next_readme&utm_medium=github&utm_campaign=readme) by Adriano Raiano
- [I18n with React and i18next](https://alligator.io/react/i18n-with-react-and-i18next) via Alligator.io by Danny Hurlburt
- [Ultimate Localization of React (Mobx) App with i18next](https://itnext.io/ultimate-localization-of-react-mobx-app-with-i18next-efab77712149) via itnext.io by Viktor Shevchenko
- [Internationalization for react done right Using the i18next i18n ecosystem](https://reactjsexample.com/internationalization-for-react-done-right-using-the-i18next-i18n-ecosystem/) via reactjsexample.com
- [How to translate React application with react-i18next](https://codetain.com/blog/how-to-translate-react-application-with-react-i18next/) via codetain.co by Norbert Suski
- [Building i18n with Gatsby](https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/) via gatsbyjs.org by Samuel Goudie
- [Get your react.js application translated with style](https://medium.com/@jamuhl/get-your-react-js-application-translated-with-style-4ad090aefc2c) by Jan Mühlemann
- [Translate your expo.io / react-native mobile application](https://medium.com/@jamuhl/translate-your-expo-io-react-native-mobile-application-aa220b2362d2) by Jan Mühlemann
- You're welcome to share your story...

### Why i18next?

- **Simplicity:** no need to change your webpack configuration or add additional babel transpilers, just use create-react-app and go.
- **Production ready** we know there are more needs for production than just doing i18n on the clientside, so we offer wider support on [serverside](https://www.i18next.com/overview/supported-frameworks) too (nodejs, php, ruby, .net, ...). **Learn once - translate everywhere**.
- **Beyond i18n** comes with [Locize](https://www.locize.com?utm_source=react_i18next_readme&utm_medium=github&utm_campaign=readme) bridging the gap between development and translations - covering the whole translation process. Now with a **Free plan** for your side projects!



### Localization workflow

Want to learn more about how seamless your internationalization and translation process can be?

[](https://youtu.be/osScyaGMVqo)

[watch the video](https://youtu.be/osScyaGMVqo)

### Installation

Source can be loaded via [npm](https://www.npmjs.com/package/react-i18next) or [downloaded](https://github.com/i18next/react-i18next/blob/master/react-i18next.min.js) from this repo.

```
# npm package
$ npm install react-i18next
```

- If you don't use a module loader it will be added to `window.reactI18next`

### Do you like to read a more complete step by step tutorial?

[Here](https://www.locize.com/blog/react-i18next/?utm_source=react_i18next_readme&utm_medium=github&utm_campaign=readme) you'll find a simple tutorial on how to best use react-i18next.
Some basics of i18next and some cool possibilities on how to optimize your localization workflow.

### Examples

- [Example react](https://github.com/i18next/react-i18next/tree/master/example/react)
- [React examples with typescript](https://github.com/i18next/react-i18next/tree/master/example/react-typescript)
- [Example locize.com](https://github.com/i18next/react-i18next/tree/master/example/locize)

#### v9 samples

- [Example react](https://github.com/i18next/react-i18next/tree/v9.x.x/example/react)
- [Example preact](https://github.com/i18next/react-i18next/tree/v9.x.x/example/preact)
- [Example react-native](https://github.com/i18next/react-i18next/tree/v9.x.x/example/reactnative-expo)
- [Example expo.io](https://github.com/i18next/react-i18next/tree/v9.x.x/example/reactnative-expo)
- [Example next.js](https://github.com/i18next/react-i18next/tree/v9.x.x/example/nextjs)
- [Example razzle](https://github.com/i18next/react-i18next/tree/v9.x.x/example/razzle-ssr)
- [Example hashbase / beaker browser](https://github.com/i18next/react-i18next/tree/v9.x.x/example/dat)
- [Example storybook](https://github.com/i18next/react-i18next/tree/v9.x.x/example/storybook)
- [Example locize.com](https://github.com/i18next/react-i18next/tree/v9.x.x/example/locize)
- [Example test with jest](https://github.com/i18next/react-i18next/tree/v9.x.x/example/test-jest)

### Requirements

- react >= **16.8.0**
- react-dom >= **16.8.0**
- react-native >= **0.59.0**
- i18next >= **10.0.0** (typescript users: >=17.0.9)

#### v9

- react >= **0.14.0** (in case of < v16 or preact you will need to define parent in [Trans component](https://react.i18next.com/latest/trans-component#trans-props) or globally in [i18next.react options](https://react.i18next.com/latest/trans-component#i18next-options))
- i18next >= **2.0.0**

## Core Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):




<table>
  <tr>
    <td align="center"><a href="http://twitter.com/jamuhl"><img src="https://avatars3.githubusercontent.com/u/977772?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jan Mühlemann</b></sub></a><br /><a href="https://github.com/i18next/react-i18next/commits?author=jamuhl" title="Code">💻</a> <a href="#example-jamuhl" title="Examples">💡</a> <a href="https://github.com/i18next/react-i18next/pulls?q=is%3Apr+reviewed-by%3Ajamuhl+" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/i18next/react-i18next/commits?author=jamuhl" title="Documentation">📖</a> <a href="#question-jamuhl" title="Answering Questions">💬</a></td>
    <td align="center"><a href="http://twitter.com/#!/adrirai"><img src="https://avatars0.githubusercontent.com/u/1086194?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adriano Raiano</b></sub></a><br /><a href="https://github.com/i18next/react-i18next/commits?author=adrai" title="Code">💻</a> <a href="#example-adrai" title="Examples">💡</a> <a href="https://github.com/i18next/react-i18next/pulls?q=is%3Apr+reviewed-by%3Aadrai+" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/i18next/react-i18next/commits?author=adrai" title="Documentation">📖</a> <a href="#question-adrai" title="Answering Questions">💬</a></td>
    <td align="center"><a href="https://github.com/pedrodurek"><img src="https://avatars1.githubusercontent.com/u/12190482?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pedro Durek</b></sub></a><br /><a href="https://github.com/i18next/react-i18next/commits?author=pedrodurek" title="Code">💻</a> <a href="#example-pedrodurek" title="Examples">💡</a> <a href="https://github.com/i18next/react-i18next/pulls?q=is%3Apr+reviewed-by%3Apedrodurek+" title="Reviewed Pull Requests">👀</a> <a href="#question-pedrodurek" title="Answering Questions">💬</a></td>
    <td align="center"><a href="https://tigerabrodi.dev/"><img src="https://avatars1.githubusercontent.com/u/49603590?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tiger Abrodi</b></sub></a><br /><a href="https://github.com/i18next/react-i18next/commits?author=tigerabrodi" title="Code">💻</a> <a href="https://github.com/i18next/react-i18next/pulls?q=is%3Apr+reviewed-by%3Atigerabrodi" title="Reviewed Pull Requests">👀</a></td>
  </tr>
</table>






This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!

---

<h3 align="center">Gold Sponsors</h3>

<p align="center">
  <a href="https://www.locize.com/?utm_source=react_i18next_readme&utm_medium=github&utm_campaign=readme" target="_blank">
    <img src="https://raw.githubusercontent.com/i18next/i18next/master/assets/locize_sponsor_240.gif" width="240px">
  </a>
</p>

---

**localization as a service - [Locize](https://www.locize.com?utm_source=react_i18next_readme&utm_medium=github&utm_campaign=readme)**

Needing a translation management? Want to edit your translations with an InContext Editor? Use the original provided to you by the maintainers of i18next!

**Now with a [Free plan](https://www.locize.com/pricing?utm_source=react_i18next_readme&utm_medium=github&utm_campaign=readme) for small projects!** Perfect for hobbyists or getting started.



By using [Locize](https://www.locize.com/?utm_source=react_i18next_readme&utm_medium=github&utm_campaign=readme) you directly support the future of i18next and react-i18next.

---

---

### Overview (`example/ReactNativeLocizeProject/README.md`)

This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).

# Getting Started

> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.

## Step 1: Start Metro

First, you will need to run **Metro**, the JavaScript build tool for React Native.

To start the Metro dev server, run the following command from the root of your React Native project:

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

## Step 2: Build and run your app

With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:

### Android

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

### iOS

For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).

The first time you create a new project, run the Ruby bundler to install CocoaPods itself:

```sh
bundle install
```

Then, and every time you update your native dependencies, run:

```sh
bundle exec pod install
```

For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.

This is one way to run your app — you can also build it directly from Android Studio or Xcode.

## Step 3: Modify your app

Now that you have successfully run the app, let's make changes!

Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).

When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:

- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.

## Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

### Now what?

- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).

# Troubleshooting

If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.

# Learn More

To learn more about React Native, take a look at the following resources:

- [React Native Website](https://reactnative.dev) - learn more about React Native.
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

---

### Overview (`example/ReactNativeProject/README.md`)

This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).

# Getting Started

> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.

## Step 1: Start Metro

First, you will need to run **Metro**, the JavaScript build tool for React Native.

To start the Metro dev server, run the following command from the root of your React Native project:

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

## Step 2: Build and run your app

With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:

### Android

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

### iOS

For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).

The first time you create a new project, run the Ruby bundler to install CocoaPods itself:

```sh
bundle install
```

Then, and every time you update your native dependencies, run:

```sh
bundle exec pod install
```

For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.

This is one way to run your app — you can also build it directly from Android Studio or Xcode.

## Step 3: Modify your app

Now that you have successfully run the app, let's make changes!

Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).

When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:

- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.

## Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

### Now what?

- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).

# Troubleshooting

If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.

# Learn More

To learn more about React Native, take a look at the following resources:

- [React Native Website](https://reactnative.dev) - learn more about React Native.
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

---

### Overview (`example/devserver-save-missing/README.md`)

# Example using the Vite dev server to save missing translations

The browser-side i18next is configured with `saveMissing: true` and `addPath: '/locales/{{lng}}/{{ns}}'` (see `src/i18n.js`).
Whenever a translation key is missing, [i18next-http-backend](https://github.com/i18next/i18next-http-backend) POSTs it to the dev server.

A small Vite plugin in `vite.config.js` mounts an express handler on the dev server for `POST /locales/:lng/:ns` using
[i18next-http-middleware](https://github.com/i18next/i18next-http-middleware)'s `missingKeyHandler` together with
[i18next-fs-backend](https://github.com/i18next/i18next-fs-backend), which writes the missing keys to
`public/locales/{{lng}}/{{ns}}.missing.json`.

This project uses [Vite](https://vite.dev).

## Available Scripts

- `npm start` (or `npm run dev`): start the dev server at [http://localhost:5173](http://localhost:5173), open it and check `public/locales/en/translation.missing.json`
- `npm run build`: production build into `dist/`
- `npm run preview`: serve the production build locally (no save-missing handler, that's dev-server only)

---

### Overview (`example/locize/README.md`)

**A step by step tutorial can also be found [here](https://github.com/locize/react-tutorial).**

This project uses [Vite](https://vite.dev).

[](https://youtu.be/osScyaGMVqo)
[watch the video](https://youtu.be/osScyaGMVqo)

[](https://www.youtube.com/watch?v=9NOzJhgmyQE)
[watch the video (old client)](https://www.youtube.com/watch?v=9NOzJhgmyQE)

## using with locize

We added our translation management [locize.com](https://www.locize.com?utm_source=react_i18next_locize_readme&utm_medium=github&utm_campaign=example_locize_readme).

InContext Editing:

- [locize](https://github.com/locize/locize)
- [locize-editor](https://github.com/locize/locize-editor) (old client)

i18next Backend: loading translations, save new segments during runtime

- [i18next-locize-backend](https://github.com/locize/i18next-locize-backend)

last used: sets a timestamp on every key touched -> safely remove old/unused keys

- [locize-lastused](https://github.com/locize/locize-lastused)

You will find your project informations like projectId and apiKey on your locize projects settings. (Signup add a new project for testing).

Set projectId and apiKey in `/src/i18n.js`.

## start

```bash
# npm start
```

insert `http://localhost:5173` in the locize client to open your application with the locize incontext editor.

### for old locize client:

open `http://localhost:5173?locize=true` to open your application with the locize incontext editor.

## build

```bash
# npm run build
```

creates the production build in `dist/` (`npm run preview` serves it locally).

---

### Overview (`example/razzle-ssr/README.md`)

# Getting started

Built with [Vite SSR](https://vite.dev/guide/ssr) (react) and express.

```bash
# npm install
# npm start
```

**open:**

will detect language: [http://localhost:3000](http://localhost:3000)

german: [http://localhost:3000/?lng=de](http://localhost:3000/?lng=de)

english: [http://localhost:3000/?lng=en](http://localhost:3000/?lng=en)

## production

```bash
# npm run build
# npm run start:prod
```

## Learn more

- Uses express to also serve translations for clientside
- Translations are passed down to client on initial serverside render -> no reload of translations, no flickering
- Uses _i18next-http-middleware_ on the serverside to assert that every request gets his own instance of i18next (no race condition conflicts when user b overrides set language in i18next singleton of user a!!!)
- completely allows saveMissing feature of i18next -> added content will be pushed to server (`POST /locales/:lng/:ns`) and stored in `src/locales/{{lng}}/{{ns}}.missing.json`

---

### Overview (`example/react-component-lib/README.md`)

# [Ready to take i18next to the next level?](https://www.locize.com/?utm_source=react_i18next_react_component_lib_readme&utm_medium=github&utm_campaign=example_react_component_lib_readme)

Needing a translation management? Want to edit your translations with an InContext Editor? Use the original provided to you by the maintainers of i18next!



With using [locize](https://www.locize.com/?utm_source=react_i18next_react_component_lib_readme&utm_medium=github&utm_campaign=example_react_component_lib_readme) you directly support the future of i18next and react-i18next.

## Here you find a react example for locize:

[EXAMPLE](../locize)

[](https://youtu.be/osScyaGMVqo)
[watch the video](https://youtu.be/osScyaGMVqo)

---

This project uses [Vite](https://vite.dev).

## Available Scripts

- `npm start` (or `npm run dev`): start the dev server at [http://localhost:5173](http://localhost:5173)
- `npm run build`: production build into `dist/`
- `npm run preview`: serve the production build locally

---

### Overview (`example/react-icu/README.md`)

This project uses [Vite](https://vite.dev).

## Available Scripts

- `npm start` (or `npm run dev`): start the dev server at [http://localhost:5173](http://localhost:5173)
- `npm run build`: production build into `dist/`
- `npm run preview`: serve the production build locally
- `npm test`: run the tests with [Vitest](https://vitest.dev)

---

### Overview (`example/react-localstorage/README.md`)

# [Ready to take i18next to the next level?](https://www.locize.com/?utm_source=react_i18next_react_localstorage_readme&utm_medium=github&utm_campaign=example_react_localstorage_readme)

Needing a translation management? Want to edit your translations with an InContext Editor? Use the original provided to you by the maintainers of i18next!



With using [locize](https://www.locize.com/?utm_source=react_i18next_react_localstorage_readme&utm_medium=github&utm_campaign=example_react_localstorage_readme) you directly support the future of i18next and react-i18next.

## Here you find a react example for locize:

[EXAMPLE](../locize)

[](https://youtu.be/osScyaGMVqo)
[watch the video](https://youtu.be/osScyaGMVqo)

---

This project uses [Vite](https://vite.dev).

## Available Scripts

- `npm start` (or `npm run dev`): start the dev server at [http://localhost:5173](http://localhost:5173)
- `npm run build`: production build into `dist/`
- `npm run preview`: serve the production build locally

---

### Overview (`example/react/README.md`)

# [Ready to take i18next to the next level?](https://www.locize.com/?utm_source=react_i18next_react_readme&utm_medium=github&utm_campaign=example_react_readme)

Needing a translation management? Want to edit your translations with an InContext Editor? Use the original provided to you by the maintainers of i18next!



With using [locize](https://www.locize.com/?utm_source=react_i18next_react_readme&utm_medium=github&utm_campaign=example_react_readme) you directly support the future of i18next and react-i18next.

## Here you find a react example for locize:

[EXAMPLE](../locize)

[](https://youtu.be/osScyaGMVqo)
[watch the video](https://youtu.be/osScyaGMVqo)

---

This project uses [Vite](https://vite.dev).

## Available Scripts

- `npm start` (or `npm run dev`): start the dev server at [http://localhost:5173](http://localhost:5173)
- `npm run build`: production build into `dist/`
- `npm run preview`: serve the production build locally

---

### Overview (`example/storybook/README.md`)

# react-i18next in Storybook

This is an example application using `react-i18next` in Storybook including a menu in the toolbar to change the
locale of your stories.



## 🏁 Getting started

```bash
# Install dependencies
npm install

# Start the React app (Vite dev server at http://localhost:5173)
npm start

# Start Storybook (http://localhost:9009)
npm run storybook

# Build the static Storybook into storybook-static/
npm run build-storybook
```

## How the locale toolbar works

See [`.storybook/preview.jsx`](./.storybook/preview.jsx):

- `globalTypes.locale` adds a "Locale" dropdown to the Storybook toolbar (`initialGlobals` sets the default to `en`).
- A decorator reads `context.globals.locale`, calls `i18n.changeLanguage(locale)` whenever it changes and wraps every
  story in `I18nextProvider` (plus a `Suspense` fallback while translations are loading).
- `.storybook/main.js` uses `staticDirs: ['../public']` so `i18next-http-backend` can load `/locales/{lng}/translation.json`.

---

### Overview (`example/test-jest/README.md`)

### Intro

`./src/__mocks__` contains the react-i18next mock (mocks translate and Trans; mock other components as needed!!!)

`./src/setupTests.js` registers the `@testing-library/jest-dom` matchers (and shows how to init i18next instead of stubbing)

`./src/App.test.jsx` basic render test
`./src/*.test.jsx` tests using `@testing-library/react`

Run the tests with `npm test` (Jest, config in `jest.config.js` / `babel.config.js`).

The app itself uses [Vite](https://vite.dev): `npm start` (dev server at [http://localhost:5173](http://localhost:5173)), `npm run build` (output in `dist/`), `npm run preview`.

---

### Overview (`example/react-typescript/simple-multi-namespaces/README.md`)

This project uses [Vite](https://vite.dev).

## Available Scripts

- `npm start` (or `npm run dev`): start the dev server at [http://localhost:5173](http://localhost:5173)
- `npm run build`: type-check and production build into `dist/`
- `npm run preview`: serve the production build locally
- `npm run typecheck`: run `tsc --noEmit`
- `npm run i18next-resources-for-ts`: regenerate `src/@types/resources.ts` from `src/i18n/en`

---

### Overview (`example/react-typescript/simple/README.md`)

# react-i18next TypeScript example (simple)

A minimal React + TypeScript app showing fully type-safe `t()` calls with react-i18next. The `CustomTypeOptions` declaration lives in `src/@types/i18next.d.ts` and is fed by `src/@types/resources.ts`, which is generated from the `src/i18n/en` JSON files via `npm run i18next-resources-for-ts`.

This project uses [Vite](https://vite.dev).

## Available Scripts

- `npm start` (or `npm run dev`): start the dev server at [http://localhost:5173](http://localhost:5173)
- `npm run build`: type-check and production build into `dist/`
- `npm run preview`: serve the production build locally
- `npm run typecheck`: run `tsc --noEmit`
- `npm run i18next-resources-for-ts`: regenerate `src/@types/resources.ts` from `src/i18n/en`

---

--- METRICS ---
- Files Extracted: 14
- Estimated Token Budget: ~7447 tokens
- Canonical Reference: https://codewiki.google/github.com/i18next/react-i18next