This post is first in the series of react i18n integration.
Internationalization(i18n) is the design and development of a product, application or document content that enables support for local languages and cultural settings.
- Configuring i18n for react
- Exposing API using React provider
- Binding translations to views
- react-i18next - Provides framework binding for react.
Alright enough Bla Bla. Let's get started with some action.
$ npm install react-i18next i18next --save
Wouldn't it be nice if our react application can do the following
- Detect language based on geography.
- Load our translation from a external file.
- Store those contents in a cache or localStorage. let's add that capability by installing...
$ npm install i18next-browser-languagedetector i18next-xhr-backend i18next-localstorage-backend i18next-chained-backend
For a smaller application one wouldn't mind storing translations inside config file.
However, For a large applications this won't be an ideal solution.
Hence, to address this we will create locale folder inside the public directory that holds all our translations. For the sake of this tutorial our application will support English (EN) and Spanish (ES).
. public ├── locales ├── en ├── common.json ├── terms.json ├── home.json ├── es ├── common.json ├── terms.json ├── home.json
As you can see, In the above folder structure we have multiple JSON files for each locale. The common.json file contains all translation that are common across multiple routes. terms.json and home.json holds translated content for terms and home routes respectively.
The reason behind choosing i18next was it provides ecosystem containing various tools for integration with different languages and framework. Same learnings can be applied for other languages as well.
Now that we are done with the installation, we will now look into how the above pieces are connected together to make a config file.
Find the github repo containing all codes mentioned in this series here