react-i18next-helpers

A set of helper hooks and components to use with i18next, react-i18next and Formik; i18next makes translating a breeze in apps, and using the react-i18next opens up the API for most React Applications. However, there are blind spots like with any other libraries. These helpers are here to help you cover these blind spots.

Using Formik and translating errors

If you use Formik and you have errors rendered on the screen, you will notice that if you change the current language, your errors remain in the language they were before the translation. This library gives you a hook you can use to make sure that when the i18n language changes, your form errors are also translated.

Render Example

This example is based on using the render method for rendering a Formik form

Just passing the errors, touched, and setFieldTouched FormikProps to the hook in your render method ensures that your errors will get translated if the language changes.

HOC Example

Just passing the errors, touched, and setFieldTouched FormikProps to the HOC in your render method ensures that your errors will get translated if the language changes.

Translating raw or dynamic HTML

If you're ever in need of translating HTML you're adding dynamically to your app, and to keep content in that HTML translated, you can use the useTranslateHtmlElement hook.

The example is self explanatory.