Implement multi-languages in React
Today, we will show you how to implement multi-languages in React. Sometimes you may need to add multi-language support to a website or a react web application like English, Chinese, etc.
In this article, we’ll use the react-i18next internationalization framework for React App which is based on i18next.
Demo Application
We will create a multilingual sample application as shown below.
Steps to implement multi-languages in React
- Create a react app
- Install dependencies
- Add translation files
- Configure the i18next
- Initialize the i18next configuration
- Translate component using react-i18next
- Output
File Structure
- react-multi-lingual
- node_modules
- public
- assets
- i18n
- translations
- en.json
- zh-Hant.json
- translations
- i18n
- assets
- src
- components
- HelloWorld.js
- LangSelector.js
- ReactExample.js
- ThankYou.js
- App.js
- i18n.js
- index.css
- index.js
- components
- package-lock.json
- package.json
1. Create a react app
First of all, we will create a simple react application using the create-react-app
npm package. Run the following command to create a react app.
1 | npx create-react-app react-multi-lingual |
Check the following link for more information.
2. Install dependencies
To integrate multi-languages in the react app, we have to install the react-i18next packages. Run the following command to install the dependencies.
1 | npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector --save |
3. Add translation files
Now, we have to add the following translation files in the public/assets/i18n/translations/ folder. You have to create directories for the translation files.
1 2 3 4 5 | { "HELLO_WORLD": "Hello World!", "REACT_EXAMPLE": "This is a react example ({{count}}).", "THANK_YOU": "Thank you!" } |
1 2 3 4 5 | { "HELLO_WORLD": "你好,世界!", "REACT_EXAMPLE": "這是一個反應示例({{count}})。", "THANK_YOU": "謝謝!" } |
4. Configure the i18next
In this step, we will create the i18next
initiation script. Let’s create a file named i18n.js
under the src/ directory.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import Backend from 'i18next-http-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; i18n // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales) // learn more: https://github.com/i18next/i18next-http-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ lng: 'en', backend: { /* translation file path */ loadPath: '/assets/i18n/{{ns}}/{{lng}}.json' }, fallbackLng: 'en', debug: true, /* can have multiple namespace, in case you want to divide a huge translation into smaller pieces and load them on demand */ ns: ['translations'], defaultNS: 'translations', keySeparator: false, interpolation: { escapeValue: false, formatSeparator: ',' }, react: { wait: true } }); export default i18n; |
5. Initialize the i18next configuration
In this step, we will import the i18n.js
in the Index.js
file to initialize the i18next configuration. Here, we have to use the suspense component because i18next
load resource files asynchronously and we have to wait until the loading is completed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import React, { Suspense } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import './i18n'; ReactDOM.render( <React.StrictMode> <Suspense fallback={<span>Loading...</span>}> <App /> </Suspense> </React.StrictMode>, document.getElementById('root') ); |
6. Translate component using react-i18next
Let’s create three components for the demonstration under src/components/ directory.
- HelloWorld.js – Translate the component using the hooks.
- ThankYou.js – Use the HOC to translate the component.
- ReactExample.js – Use the Trans component to translate the complex react component.
We will also create a LangSelector.js
component to manage the language selection for the react application.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; const LangSelector = () => { const { i18n } = useTranslation(); const [selectedLang, setSelectedLang] = useState('en'); const changeLanguage = (event) => { setSelectedLang(event.target.value); i18n.changeLanguage(event.target.value); } return ( <div onChange={changeLanguage}> <label className="mr10"><input type="radio" value="en" name="language" checked={selectedLang === 'en'} /> English</label> <label><input type="radio" value="zh-Hant" name="language" checked={selectedLang === 'zh-Hant'} /> Chinese (Traditional)</label> </div> ) } export default LangSelector; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import React from 'react'; import { useTranslation } from 'react-i18next'; const HelloWorld = () => { const { t } = useTranslation(); return ( <div> <b>{t('HELLO_WORLD')}</b> </div> ) } export default HelloWorld; |
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; import { withTranslation } from 'react-i18next'; const ThankYou = ({ t }) => { return ( <div className="tks"> <i>{t('THANK_YOU')}</i> </div> ) } export default withTranslation()(ThankYou); |
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; import { Trans, withTranslation } from 'react-i18next'; const ReactExample = () => { return ( <div> <Trans count="3">REACT_EXAMPLE</Trans> </div> ) } export default withTranslation()(ReactExample); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import React from 'react' import HelloWorld from './components/HelloWorld'; import LangSelector from './components/LangSelector'; import ReactExample from './components/ReactExample'; import ThankYou from './components/ThankYou'; function App() { return ( <React.Fragment> <h3>Implement multi-languages in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <LangSelector /> <div className="app"> <HelloWorld /> <ReactExample /> <ThankYou /> </div> </React.Fragment> ); } export default App; |
7. Output
Run the react application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂