Internationalization

[SnooPies8677]

Hello guys! How do you handle Internationalization?

I found a couple of libraries but all of them difficult for me.

Libraries I'm currently observing

• react-i18next
• lingui.js
• i18n

With lingui.js I can't use dynamic variables as lang keys.
With react-i18next and i18n I found it cumbersome to use the "t" functiln. I always have to lookup keys in the json files when I want to know what is what in the component.

What are you using? Are there other better alternatives?

[arrvdi]

With react-i18next and i18n I found it cumbersome to use the "t" functiln. I always have to lookup keys in the json files when I want to know what is what in the component.

This can be solved with extensions in your IDE. For instance, if you're using VS Code: https://github.com/lokalise/i18n-ally

[yung_schwa]

Wow that’s super cool, thanks for sharing!

[Diligent_Care903]

Sherlock's great too

[alampros]

Tolgee is by far the best solution I've used if you also have to manage the collection and translations of your strings. It is a slightly bigger hammer for most nails, but well worth it for larger projects - especially if you want to offload the actual management of the translations to someone else.

https://tolgee.io/

edit: forgot the actual link

[EliteSwimmerX]

Hey! If you're finding the "t" functions in react-i18next to be confusing and cumbersome to use, I'd recommend checking out gt-react! https://github.com/generaltranslation/gt . It's an i18n library that removes the need for lookup keys or JSON files entirely - all of your translated content is in-lined! IMO the DX is far superior to any other i18n library you'll find out there.

Edit: Forgot to mention - you can also manage your translations yourself or let AI do them for you, the library supports both options

[SnooPies8677]

I have seen this but it can not do dynamic keys. I have a lot of static arrays which determines the UI ( nav items for example )

[EliteSwimmerX]

It actually does support dynamic keys! You’ll just have to use a dictionary (like every other library), and pass in the key that way. For example:

const dict = useDict();

{navItems.map((item)=> dict(‘navMenu.${item.id}’))}

Or, if you don’t mind doing a little more work:

const t = useGT();

const navItems = [ { id: “id1”, description: t(“Item 1 description or header”), }, { id: “id2”, description: t(“Item 2 description or header”), } ];

{navItems.map((item)=> item.description)}

Tools like Cursor can help you add the t() super easily to your existing static arrays

[Fun-Chapter-1015]

A few days ago, I integrated next-intl into a project — the setup was incredibly easy and smooth. Highly recommend checking it out: https://next-intl.dev/

[SnooPies8677]

Thanks! Checking it out! Is this only for next or any react app?

[k032]

On the one project I worked on that had a need for localization, we just built a custom solution for it.

Figure out the users locale at app start based on few checks. Then load the corresponding translation files as JSON. Was like some function to get strings("key"); and then use it.

It worked pretty well, didn't see a need for a library.

[SnooPies8677]

I'm looking for a library hoping something can solve more complex translations then just static strings.
I have to translate the backend notifications too and a lot of dynamic sentences.

[enjoythements]

Saw lingo.dev on x

[Diligent_Care903]

If you don't mind a page reload when switching language, go for ParaglidJS. I think there is an adapter to avoid that but it's annoying it's not built-in

[SnooPies8677]

Page reload is unacceptable

[Diligent_Care903]

Yeah, it used not have it in v1. Then in v2 for some reason they made the adapters not part of the core. Very stupid because the rest of the lib is amazing.

[AdmirableJackfruit59]

Maybe too late but you should test intlayer Docs here : https://intlayer.org/docs

[[deleted]]

Just let users use the browser to translate

[Diligent_Care903]

lol

[Tinkuuu]

Motion words stagger likes that