In this article I will show you how to translate your React app with React-i18next and give a few examples that you may find useful!

I am using joy ui in this example, but I won't show any configuration for it because it is out of scope. You can see the full code in this code sandbox.

I am also assuming that you already have a react project up and running.

Setup

First of we need to add the react-i18next package and its dependencies:

1npm  install react-i18next i18next i18next-http-backend i18next-browser-languagedetector
2

You do not strictly need i18next-http-backend and i18next-browser-languagedetector, however in my experience, almost every React app with translations will want to use these tools sooner or later.

Create config and add i18next provider

Now we need to create a i18n.ts file where we will configure the i18n instance:

1// /src/i18n.ts
2import i18n from 'i18next'
3import { initReactI18next } from 'react-i18next'
4import Backend from 'i18next-http-backend'
5import LanguageDetector from 'i18next-browser-languagedetector'
6
7i18n
8  .use(Backend) // default import from /public/locales/[lang]/[namespace].json
9  .use(LanguageDetector) // Detect browser language
10  .use(initReactI18next)
11  .init({
12    fallbackLng: 'en', // Our default language
13    debug: true, // Only use this in dev mode
14    interpolation: {
15      escapeValue: false // We don't need this for React
16    }
17  })
18
19export  default i18n
20

Next we need to provide this config to our entire React app using the I18nextProvider:

1// /src/main.tsx
2import React from 'react'
3import ReactDOM from 'react-dom/client'
4import App from './App'
5import { I18nextProvider } from 'react-i18next'
6import i18n from './i18n' // import i18n config
7
8ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
9  <React.StrictMode>
10    <I18nextProvider i18n={i18n} defaultNS={'translation'}>
11      <App />
12    </I18nextProvider>
13  </React.StrictMode>
14)
15

Add the translations files

English translation:

1// /public/locales/en/translation.json
2{
3  "hello": "Hello World!"
4}
5

Dutch translation:

1// /public/locales/nl/translation.json
2{
3  "hello": "Hallo wereld!"
4}
5

Typescript

For extra convenience, we can add a react-i18next.d.ts file so the compiler will know which translation keys are available in our app. This way we get autocomplete for translation keys and it will let us know when we are using a translation key that doesn't exist:

1// /src/react-i18next.d.ts
2import  'react-i18next'
3import translation from  'locales/en/translation.json'
4
5declare module 'react-i18next' {
6  interface Resources {
7    translation: typeof translation
8  }
9}
10
11declare module 'react-i18next' {
12  interface CustomTypeOptions {
13    defaultNS: 'translation'
14    resources: {
15      translation: typeof translation
16    }
17  }
18}
19

Using translations

To translate a part of our app, we just import that useTranslation hook and let it know which translation key to use:

1// /src/App.tsx
2import { useTranslation } from 'react-i18next'
3import { Typography } from '@mui/joy'
4
5function App(){
6  const { t } =  useTranslation()
7  
8  return <Typography>{t('hello')}</Typography>
9}
10

More complex scenario's

Variables and pluralization

You might be thinking, what if some part of my text is a variable? Do I have to split the text out into chunks before and after the variable and translate them seperately? The answer is: nope, I18next has you covered!

1// translation.json
2{
3  "welcome_one":  "Welcome {{name}}, you have {{count}} message.",
4  "welcome_other":  "Welcome {{name}}, you have {{count}} messages.",
5}
6

1// /src/App.tsx
2import { useTranslation } from 'react-i18next'
3import { Typography } from '@mui/joy'
4
5function App(){
6  const { t } =  useTranslation()
7  const [name, setName] =  useState('')
8  const [count, setCount] =  useState(1)
9
10  // ...
11  
12  return <Typography>{t('welcome',  { count, name })}</Typography>
13}
14

You can do a lot of other fancy stuff with i18next as well like context aware translations.

Custom React components

Sometimes you have some text with a link for example, or you may even want to use a custom React component inside a piece of translated text. For this you have to use the Trans component.

1// translations.json
2{
3  "custom_link": "Translate some text with a custom <1>link</1>."
4}
5

Note the <1> placeholder that tells i18next where to expect a custom element.

1// /src/App.tsx
2import { Link } from '@mui/joy'
3import { Trans } from 'react-i18next'
4
5function App(){
6  return <Trans  i18nKey="custom_link">
7    Translate some text with a custom <Link  href="#link">link</Link>.
8  </Trans>
9}
10

Adding a language switcher

Building a language switcher with i18next is very simple, all we have to do is make some buttons and call the i18n.changeLanguage method with the language that we want to switch to:

1// /src/App.tsx
2import { Typography, IconButton } from '@mui/joy'
3import { useTranslation, Trans } from 'react-i18next'
4
5function App(){
6  const { t, i18n } = useTranslation()
7
8  return <>
9    <Typography>{t('hello')}</Typography>
10    <IconButton onClick={() => i18n.changeLanguage('en')} size="sm" variant={i18n.language ==='en' ? 'solid' : 'soft'}>EN</IconButton>
11    <IconButton onClick={() => i18n.changeLanguage('nl')} size="sm" variant={i18n.language ==='nl' ? 'solid' : 'soft'}>NL</IconButton>
12  </>
13}
14

Links

• Code Sandbox
• React-i18next Step-by-step guide