Member-only story
How to Add react-i18next to Your React app
8 min readJan 22, 2021
React-i18next is internationalization framework for React. This blog is a step-by-step guide about adding react-118next to a React project, such as:
- How to config react-118next
- How to sync with Redux state
- How to extract translation
The example I am going to use:
GitHub Repo: https://github.com/xiongemi/white-label-airline
GitHub Page: https://xiongemi.github.io/white-label-airline
Before we start
If you are looking for an internationalization library for React, there are a few libraries to choose from, such as react-intl and react-18next. There is a blog comparing different react i18n libraries: https://phrase.com/blog/posts/react-i18n-best-libraries/. This blog focuses on react-18next.
Installation
# npm
npm install react-i18next i18next --save// if you'd like to detect user language and load translation
npm install i18next-http-backend i18next-browser-languagedetector --save# yarn
yarn add react-18next…