I18n with React and i18next ← Alligator.io

I18n with React and i18next  #ReactJS

  • A 30,000 foot view of i18next would be that it provides a function that takes a key, some options, and returns the value for the current language.
  • Because the function will likely be called several times in an app, the creators of i18next have chosen a shortname: – which is short for translate.
  • Although i18next is designed to work with many frameworks, this post will focus on how to internationalize a React app using i18next.
  • In order to use i18next with React, the function needs to be made available to the components that need to be internationalized.
  • The React binding for i18next provides the component.

A brief introduction to internationalizing a React app using i18next.

More and more apps are being designed for the global market which means your app will need to work for an audience using various languages and dialects. React does not have internationalization (i18n) built-in, but it is not hard to internationalize an app, especially with the help from i18next.

i18next is an i18n framework written in and for JavaScript. It provides the standard i18n features of interpolation, formatting, and handling plurals and context.

A 30,000 foot view of i18next would be that it provides a function that takes a key, some options, and returns the value for the current language.

The following is a simple example of using the aforementioned function with a simple key and no options.

function in the i18next documentation and you will see it used here in this post.

Although i18next is designed to work with many frameworks, this post will focus on how to internationalize a React app using i18next.

function needs to be made available to the components that need to be internationalized. This can be done by various means. We’ll demonstrate a couple below.

Before i18next can be used, it needs to be configured. Here is the configuration used by the examples in this post. It turns off value-escaping since React already takes care of that for us, it sets the current language to English, and it hardcodes translations for two languages (English and Spanish). See the i18next configuration…

I18n with React and i18next ← Alligator.io