inigomarquinez / howto-react-i18n

POC to add internationalization to a react app

🤔 HOW TO - React app internationalization (i18n)

POC that explains how to use some useful frameworks for doing the internationalization of a React app.

Tutorial (branches)

The tutorial will go through the steps of creating a React app with i18n support, and the progress will be saved in different branches:

• 01_basic-react-app: Basic react app without internationalization (i18n) support.

• 02_i18n-support: Added i18n support to react app using react-i18next.

• 03_language-switcher: Added language switcher and support for both Spanish and English languages to react app.

• 04_advanced-features: Added advanced features such as:

  • load translation using http (/public/locales/ folder)
  • browser language detection

• 05_namespaces: Added namespaces support to better organize translation files.

• 06_extraction-tool: Added i18next-parser to extract translation strings from source code.

• 07_translations-ui: Added translation-check to show a UI with the translation strings.

• 08_i18nexus: Added i18nexus as an external service to manage translation strings.

  • React tutorial
  • API

How to run the app

This project was bootstrapped with Create React App.

Installation

First you need to install the dependencies. As there are some libraries that do not meet peer dependencies restrictions, you need to install the dependencies with the --force flag:

npm i --force

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run i18n

Launches i18next-parser to scan the code and extract the translations.
It reads the configuration from the i18next-parser.config.js file.

Useful links

• i18next: internationalization-framework that provides you with a complete solution to localize your product from web to mobile and desktop.

  • Supported frameworks

  • Plugins and utils

• react-i18next: powerful internationalization framework for React / React Native which is based on i18next.

• Flags are not languages: a blog about designing global user experiences: beyond language, location & culture.

• How to properly internationalize a React application using i18next: interesting step by step article about how to internationalize a React application using i18next.