React-i18next: typescript definitions

[jamuhl]

according to https://github.com/i18next/react-i18next/issues/331 i will accept PRs adding typescript support

[jamuhl]

@Hotell @kachkaev @schettino @zachariahtimothy @jadbox feel free to provide this.

[zachariahtimothy]

Thanks @jamuhl , but instead of fighting the Typescript holy war, dealing with double renders following this repos examples, and learning I can still use with Locize, I decided to rip out i18next and stick with react-Intl. Although I prefer react-i18next to react-intl, react-intl is a bit more straight forward and has strong support for Typescript. Perhaps I will look again at i18next someday. Thanks!

[schettino]

@jamuhl will start working on it. thanks

[jamuhl]

@zachariahtimothy yes there is also a sample to get you started over at locize -> https://github.com/locize/locize-react-intl-example

And some write-up about it:

• https://medium.com/@jamuhl/unleash-the-hidden-superpowers-of-react-intl-part-1-d6f99a32ef84
• https://medium.com/@jamuhl/unleash-the-hidden-superpowers-of-react-intl-part-2-64a195e3d60f

We don't prefer i18next over the others - all libs have their sides they shine and their caveats ;)

[jamuhl]

Yes the typescript war - still think it's a bad thing - but as a maintainer of a widely used library i should have taken a step back and listen to the users. This was wrong of me and i apology for that.

[jamuhl]

@zachariahtimothy one more thing...just checked the /example/react...where do you get rerenders that are not needed? i added a console.warn render_1 inside app and render_2 inside the wrapped component -> result is:

Each component renders once on init - and once on language change - the only problem is when you leave the setting bindStore as set in default toggling the language will result in more rerenders as the hoc reacts to more events triggering rerenders not needed if you do not add resources via API methods - setting that bindStore: false will stop that. (Guess i should set the default to false as devs use the resourceStore api less often)

[zachariahtimothy]

@jamuhl I was getting double renders on the Next JS example. I believe I did find it to be caused by language changed...even though the language did not change. I messed with the settings forever to accommodate with no luck.
The importing/exporting of the i18n instance vs class is too spooky for me as well, which might be why every example I look at is implemented differently and none of them work the way I expect. Anyway, i18Next works GREAT on the backend for translating API messages, and pairs so delightfully with the Locize service so will go that route.

[jamuhl]

@zachariahtimothy Hm, the latest sample here for next.js should work as expected...when the language change triggers multiple rerender it is really the bindStore option. Really will change that default on the next major version - so devs have not to think about that setting in most common cases

[jamuhl]

@Hotell @kachkaev @zachariahtimothy @jadbox landed in [email protected] thanks to @schettino.

Would be awesome if you could share this news in your social network 👍

And don’t forget to star this repo if you like it. Make a tweet or have a look at our https://locize.com -> there are many ways to help this project. 🙏