How To Add Multiple Language Support In ReactJS

This page summarizes the projects mentioned and recommended in the original post on dev.to
#MVC Frameworks and Libraries #I18n And L10n #Translation #JavaScript #React

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • SurveyJS - Extensible JavaScript Form Builder Libraries
  • InfluxDB - Access the most powerful time series database as a service
Our great sponsors

  • i18next

    i18next: learn once - translate everywhere

    Now inside tag add onChange method, this is where we get values from options provided and pass it to i18n to change language i18n.changeLanguage(e.target.value)}> Choose language Uzbek Russian English Enter fullscreen mode Exit fullscreen mode Final App.js import logo from './logo.svg'; import './App.css'; import { useTranslation } from 'react-i18next'; function App() { const { t, i18n } = useTranslation() return (

    logo

    Edit src/App.js and save to reload.

    i18n.changeLanguage(e.target.value)}> Choose language Uzbek Russian English {t('welcome')}
    {t('goodbye')}
    ); } export default App; Enter fullscreen mode Exit fullscreen mode Result Translation optimization Step 1: Now, did you noticed our translations are located inside i18n.js file. We haven't yet started splitting translations into multiple files (which is highly recommended for larger projects) but we already see that adding more languages would result in bundling unneeded translations into the application. In order to separate our translation we will use package namely i18next-http-backend, which helps us to load our translations asynchronously. Install i18next-http-backend by running this code on terminal npm install i18next-http-backend Enter fullscreen mode Exit fullscreen mode Now we need to wire up i18next-http-backend into our i18n.js file import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import backend from "i18next-http-backend"; // <--- import here i18n .use(initReactI18next) // passes i18n down to react-i18next .use(backend) // <--- wire up here .init({ // the translations // (tip move them in a JSON file and import them, // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui) resources: { uz: { translation: { welcome: "Xush kelibsiz", goodbye: "Xayr" } }, ru: { translation: { welcome: "Добро пожаловать", goodbye: "До свидания" } }, en: { translation: { welcome: "Welcome", goodbye: "Goodbye" } } }, lng: "en", // if you're using a language detector, do not define the lng option fallbackLng: "en", interpolation: { escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape } }); Enter fullscreen mode Exit fullscreen mode Once we connected i18next-http-backend, by default it will load translation from this path '../public/locales/{lang}/translation.json' Enter fullscreen mode Exit fullscreen mode This path considered to be the default for the i18next-http-backend to load from. Step 2: We need to create this path locales/{lang}/translation.json inside public folder. Now we need to remove this part of code from i18n.js file And add our translations inside translation.json file for each language. UZ RU EN Now check result on browser Final Result Link to full source of tutorial here Reference list i18next React.i18next Locize Geeksforgeeks Legacy-v9

  • react-native

    A framework for building native applications using React

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

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • React

    The library for web and native user interfaces

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

  • react-i18next

    Internationalization for react done right. Using the i18next i18n ecosystem.

    Now inside tag add onChange method, this is where we get values from options provided and pass it to i18n to change language i18n.changeLanguage(e.target.value)}> Choose language Uzbek Russian English Enter fullscreen mode Exit fullscreen mode Final App.js import logo from './logo.svg'; import './App.css'; import { useTranslation } from 'react-i18next'; function App() { const { t, i18n } = useTranslation() return (

    logo

    Edit src/App.js and save to reload.

    i18n.changeLanguage(e.target.value)}> Choose language Uzbek Russian English {t('welcome')}
    {t('goodbye')}
    ); } export default App; Enter fullscreen mode Exit fullscreen mode Result Translation optimization Step 1: Now, did you noticed our translations are located inside i18n.js file. We haven't yet started splitting translations into multiple files (which is highly recommended for larger projects) but we already see that adding more languages would result in bundling unneeded translations into the application. In order to separate our translation we will use package namely i18next-http-backend, which helps us to load our translations asynchronously. Install i18next-http-backend by running this code on terminal npm install i18next-http-backend Enter fullscreen mode Exit fullscreen mode Now we need to wire up i18next-http-backend into our i18n.js file import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import backend from "i18next-http-backend"; // <--- import here i18n .use(initReactI18next) // passes i18n down to react-i18next .use(backend) // <--- wire up here .init({ // the translations // (tip move them in a JSON file and import them, // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui) resources: { uz: { translation: { welcome: "Xush kelibsiz", goodbye: "Xayr" } }, ru: { translation: { welcome: "Добро пожаловать", goodbye: "До свидания" } }, en: { translation: { welcome: "Welcome", goodbye: "Goodbye" } } }, lng: "en", // if you're using a language detector, do not define the lng option fallbackLng: "en", interpolation: { escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape } }); Enter fullscreen mode Exit fullscreen mode Once we connected i18next-http-backend, by default it will load translation from this path '../public/locales/{lang}/translation.json' Enter fullscreen mode Exit fullscreen mode This path considered to be the default for the i18next-http-backend to load from. Step 2: We need to create this path locales/{lang}/translation.json inside public folder. Now we need to remove this part of code from i18n.js file And add our translations inside translation.json file for each language. UZ RU EN Now check result on browser Final Result Link to full source of tutorial here Reference list i18next React.i18next Locize Geeksforgeeks Legacy-v9

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts