React i18next Tutorial | How To Localise Your React Application

Подписаться 5 тыс.

Просмотров 40 тыс.

50% 1

Hello! This week we are looking into how to localise your react app react i18next. This is a lot easier than you would think! I hope you enjoy :)
Useful Links:
github.com/red...
react-i18next: react.i18next....
i18next: i18next.com/
backends: www.i18next.co...
Music:
• Kenz
Huge thank you to Harris Heller for providing copyright free music.
▬▬▬▬▬
Hey everyone! My name is Redhwan Nacef (Red for short). In this channel, I'm hoping to share my thoughts on software engineering, coding, management, and all things tech. I hope you enjoy!

Опубликовано:

18 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@sprintwithcarlos 3 года назад

I have watched so many videos trying to explain this, you have succeeded by being clear and straight to the point. Thank you!

@RedhwanNacef 3 года назад

Glad it helped! Thanks.

@jordansjourneythroughlife3587 2 года назад

@@RedhwanNacef are you from Scotland dude?

@kazimdminhajulhaider3709 Год назад

simple, clear and to the point explanations

@RedhwanNacef Год назад

Thanks, glad you enjoyed it.

@ooogabooga5111 3 года назад

simple and straight to the point like i want , thanks

@RedhwanNacef 3 года назад

Glad you liked it!

@dalvanbcarvalho Год назад

thanks man, your video is light-years better than the i18next docs

@RedhwanNacef Год назад

Glad it helped!

@jericovalino4976 3 года назад

This is exactly what I needed.. Thanks a lot!

@RedhwanNacef 3 года назад

Glad it helped!

@heyralfs 2 года назад

Perfect explanation! Congrats and thank you!

@RedhwanNacef 2 года назад

Glad it helped! 🙂

@emaaadelgado Год назад

Great video!! thanks for sharing!

@RedhwanNacef Год назад

Thanks for watching!

@lukelu Год назад

Great tutorial with high clearness. One question hope to hear your expertise: For React Native, I was wondering if it still works.

@RedhwanNacef Год назад

Thanks! Yes i18n supports react native so it should work but I would consult the docs for any more info as I have not played around with that before. Good luck!

@BinaryBenevolence 2 года назад

thanks for this tutorial. helped me to understand it. can you please include example how will we use for list of items?

@RedhwanNacef 2 года назад

Glad it helped! Happy to help with an example, what kind of issue are you facing?

@maratfaizer 2 года назад

thanks for a hint about plural!

@RedhwanNacef 2 года назад

No problem, glad it helped! (Note in the latest version of react i18n there is a slight change in syntax: www.i18next.com/translation-function/plurals)

@krunalchauhan5780 3 года назад

Always come with unique content ❤️

@RedhwanNacef 3 года назад

I do try 👍🏼

@caseycarmelo547 3 года назад

A tip: you can watch movies on Flixzone. I've been using them for watching all kinds of movies recently.

@raulzeke7550 3 года назад

@Casey Carmelo definitely, have been watching on flixzone for since november myself :)

@CoentraDZ 3 года назад

I just discovered this channel. Hitting Subscribe button is done ✅ Keep going you have a brilliant future in content creation

@RedhwanNacef 3 года назад

Thank you so much for the amazing comment. Really glad you enjoy the content.

@matc8085 Год назад

awesome worked flawlessly, easy explanation. video with bad quality but can still follow everything so np

@RedhwanNacef Год назад

Thanks!

@Meugur 2 года назад

Nice and clear. Thanks much !

@RedhwanNacef Год назад

You're welcome!

@mayank1990rock 2 года назад

Perfect explanation, thnks man

@RedhwanNacef 2 года назад

Glad you enjoyed it. Thanks.

@francksgenlecroyant 2 года назад

you just got another subscriber, good explanation

@RedhwanNacef 2 года назад

Thanks so much :)

@souravdey1775 2 года назад

Awesome ✨👍

@RedhwanNacef Год назад

Cheers! 👍🏽

@ehinderoisrael1697 2 года назад

cool, thanks

@RedhwanNacef 2 года назад

Anytime.

@donmacarthur8390 2 года назад

Awesome tutorial. Thank you!!

@RedhwanNacef 2 года назад

Thanks. You're very welcome!

@MunshiWahid 3 года назад

Great video.

@RedhwanNacef 3 года назад

Thank you.

@awesomearts252 Год назад

Thanks

@RedhwanNacef Год назад

You're welcome

@myhanhnguyen5198 2 года назад

thanks a lot

@RedhwanNacef 2 года назад

Anytime

@TheCrashToaster 3 года назад

Thanks!

@RedhwanNacef 3 года назад

Anytime!

@manikandanmuthupandi140 2 года назад

Thank you it was very usefull

@RedhwanNacef 2 года назад

You’re welcome, glad it helped 🙂

@ambitionhut 2 года назад

So my issue is it all works, but lets say I change from english to french, and then reload page, the dropdown shows english but the translation is french. How can I change it so the dropdown select is based on the language?

@RedhwanNacef 2 года назад

Yea the way I've set it up here it should always reset to english. You would need to store the selected language somewhere for example local storage or a database. Then when you load the component you would need to load the language and make sure to update the dropdown and the language. Hope that helps.

@tosunabi1664 2 года назад

How does it know if the passed object indicates a plural or singular value?

@RedhwanNacef 2 года назад

It uses the 'count' variable to determine that. That is a special keyword that is knows about. Although I would check the documentation as I believe they have updated the approach to plural since I published this video.

@madhansundar8124 3 года назад

Hello, Small doubt , assume I am having .properties file from Spring MVC application where i am having language values, how will i get values from there to react app ?

@RedhwanNacef 3 года назад

Hi, there are a few different ways to do something like this depending on the use case, but at a hight level you can usually expose a rest api in your controller and use the react app to fetch the data. Alternatively if it they are both in the same repository you can use node (something like that) and copy the files at build time too. Hope that helps.

@madhansundar8124 3 года назад

@@RedhwanNacef thank you

@prakashgolwalkar768 2 года назад

Can anyone help me.i want to change the content of the drop-down. I mean there will be a button to change language from English to Spanish.but I want to change the content of the drop-down menu in each click of the button..in my drop down menu it has Home , contact us , tickets.these options.can anyone suggest some tutorial.or any site where it has been implemented

@RedhwanNacef 2 года назад

Not sure if I am missing something, but you can use the t function just like I have done for the over tag in this tutorial? So something like {t("home")}. The values can stay as is as they are not seen by the user.

@prakashgolwalkar768 2 года назад

@@RedhwanNacef thanks for the response .but I forget to mention.for drop-down we are not using option tag.instead we are using json schema for dropdown.thats why I am confused how to implement that.one more thing we are using typescript

@RedhwanNacef 2 года назад

Do you have an example on github or somewhere you can share? It is hard to try help without understanding the context.

@prakashgolwalkar768 2 года назад

@@RedhwanNacef yeah but actually i cannot share the code publicly.is it possible that you can share your email id.where i can share a video of the code or screen shot

@RedhwanNacef 2 года назад

I understand, some people just leave an example separate from the original codebase. You can find my contact details here: redhwannacef.com/contact.

@nikitastriuk 3 года назад

Huge thanks for this lesson. What if we need to translate a variable outside of the React component? For example some shared labels variable from constants.js file (which was used in different files). Translation appears only after page refreshing. Any workaround?

@RedhwanNacef 3 года назад

Thank you, glad it was useful. Generally, this will only work within the component as it uses the Context API. If you want to share labels you could keep the string keys in the constants file, then pass the key through the `t()` function in the component. Does that make sense?

@nikitastriuk 3 года назад

@@RedhwanNacef For sure! Thanks again!

@coldwarrior9992 3 года назад

When i refresh the page, language stay the same, but in my switch toggler, i had default language, i tried to use use effect in order to switch it back, using useRouter.locale, but did not succeed( any thoughts?)

@RedhwanNacef 3 года назад

Sorry I am not quite sure what you mean, do you maybe have a code sample that I can check? If you want to add a default language to the dropdown, you would probably have to make sure the same default is in the i18n.init function in the lng property. In this example, the language will always go back to english when refreshed because of that.

@coldwarrior9992 3 года назад

@@RedhwanNacef sorry for my broken language) when i change the language, everything translated properly, but then when i refresh the page, the page stays translated, but my language toggler, in my case (select with options, dropdown toggler), get back to default language. Basically i want to style my switch toggle links, so users could see which language is active, but cant implement it)

@RedhwanNacef 3 года назад

No worries. I think I understand. If you use the hook, you can get the current translations, something like: const { t, i18n } = useTranslation(); console.log(i18n.language); So then you can the i18n.language and set the default on the select: That way, whatever the language in the i18n config, the toggle should match. Does that help at all?

@coldwarrior9992 3 года назад

@@RedhwanNacef i will try it tomorrow at work, but thank you in advance, you are very kind person✊

@coldwarrior9992 3 года назад

It works, thank you again!)

@peichan1656 2 года назад

I am having difficulty with this as it is giving me a "Uncaught TypeError: (void 0) is not a function" error. I don't understand why as I am initialising it within a jsx file. I believe it is coming from the code i18n.use(initReacti18nNext)

@RedhwanNacef 2 года назад

Sorry it's hard to figure out without seeing the setup, if you can provide a sample of github or something I am happy to take a quick look.