React i18next (Complete Tutorial)

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video we will learn about translating your React app into multiple languages using React-i18next. This will allow you to specify a simple configuration object with all of your languages, and then use the useTranslation hook or the Trans component to translate any string in your application into any other language.

[i.hate.artists]

Brother, do you understand that you are the GOAT of React tutorials?

[dominikrodler]

Very nice introduction!
A few additional things that might be interesting to new users:
1) You can keep basic HTML nodes (e.g. <strong>) instead of those numbers (<1>) in your translation strings.
2) ESLint plugin eslint-plugin-i18next helps you find untranslated texts in your code.
3) i18next-scanner can automatically extract all translated texts and collect them in translation files (e.g. /en/frontend.json, /de/frontend.json). The same thing could be done with the "saveMissing" config option it seems, but I haven't tried that myself yet.

[АлександрПрошанов]

Thank you for helping us to get into new instruments without having to waddle through infinite docs. Immense gratitude from the whole react-junior community

[namesarefools]

best tutorial for useful libraries that most people didnt cover. you earn my sub!

[haribo_player-too]

Ok this is one more sub in the bank. I’ve been watching few of your tutorials here and there and you never miss, always go smoothly.

Trans component was starting to give me headache, thank you for this

[ivan]

I used it once, and it worked well with normal tags in locales, and without passing the whole string in addition to the key. It only supported simple tags like strong etc. But it worked.

[BrantK]

Oh wow, this is awesome! I used to be a translator and now I'm a software developer. I'm REALLY interested in internationalizing and translating web apps.

[leroviten]

Trans component is much easier to deal with using built-in 'components' property. No headache at all. As an idea of improvement as in a real project - load translations async from db. So neat. Thanks for your time and gr8 tut, man

[ElNicopewpew]

Great stuff as usual. Since hardly any websites are hardcoded these days, it would be killer to see this implemented with a cms such as sanity!

[tomeski]

Don't forget, that my bro is fluent in French, and he's very proud of it!

[AndreiTornyai]

thank you good summary of the capabilities of i18n

[jfr-]

Bon tutoriel, il y a tout ce qu'il faut

[rushikeshgandhmal]

Hey man, thanks a lot. Helped me a lot. You are always best at explaining concepts.

[sylum]

Regarding a change in keys that can break the UI - if your component and its helpers are padded with tests, then the commit that has these breaking changes should fail at some level, depending on the setup you have. For example a pre-commit script that runs all *.test files, a github action that blocks the PR if any test fails, etc.

[orangvaik]

in this tutorial string data is static, what about string data which is dynamic like data from a database?

[katerynamordovtseva]

For Ru, Urk and other slovenian languages, this words have more declinations, so use:

welcomeMessage_one, welcomeMessage_few, welcomeMessage_many, otherwise it may not work)
Also, we do translate names, for us there is a difference in Latin and Cyrillic)

[CLeovison]

Hi cosden i hope you make a tutorial on how to use react helmet async. Been watching your tutorial about react. Thank you so much for bringing a good quality video

[izaias]

you can use the trans component like this

with html tags or components
<Trans
i18nKey={'welcomeMessage'}
components={[<strong />]}
/>

with variables and html tags or components
<Trans
i18nKey={'welcomeMessage'}
values={{ user: 'user 1', name: 'username' }}
components={[<strong />]}
/>

[beninip]

Great video! My question is, should I use the useTranslation hook the same way using typescript?

[clementinaodinakachukwu]

Welldone bro. You're God's sent. I tried clicking that link for the project react, seems its broken. It keeps saying cosden refused to connect.