We’re going to take a look at localizing a React app with and . i18next is one of the most popular JavaScript localization libraries around, but its power is truly unleashed when used with i18nexus and its awesome API for scalable translation management and Google Translate automation. react-i18next i18nexus Start up the project I am going to bootstrap together a simple React application using : create-react-app npx create-react-app my-app Next, let’s into the React app directory and install a few i18next packages: cd npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector --save Don’t worry, these packages are all very lightweight and easy to use. Here’s what they do: : The base i18next library. i18next : Gives us React-friendly hooks, components, and functions for i18next. react-i18next : Let’s us use AJAX for loading translation files. i18next-http-backend : Detects your users’ preferred language based on browser settings. i18next-browser-languagedetector Let’s start up our development server with npm start Here we go! i18next + i18nexus = 🔥 Ever since I started using , I haven’t used i18next without it. i18nexus allows us to store our app strings in the cloud and automatically translates them to as many languages as we want. Whenever you’re ready to hire professional translators, you simply invite them to the i18nexus project and you’re done. i18nexus In one word: AWESOME. Go to and sign up for a free account. After naming your project you’ll be directed to your language dashboard: i18nexus.com The first language tile is your base language — the language you’re . translating from Click “Add Language” to select a language that you want your app to use. You can select as many as you want. I think I’ll select Spanish: Next, let’s go to the page where we’ll be adding our strings. Click in the top right corner to be directed to the Strings Management page. Open Project To add your first string, click . I’m going to add a string that welcomes users to my app: Add String The is how you’ll reference this string in your app. key The is the text that will be displayed in your app. value The field is optional. It is meant to provide any extra information about the context of your string for when you’re ready to bring in professional translators. You can even add an image here for more context! details After adding the string, you can expand the row to see the auto-translations: Let’s connect to our app Back in the Export tab, we can find an i18next configuration code snippet to connect our React app to our i18nexus translations. Make sure to copy from the tab: React Let’s create a file called i18n.js in our src folder, and then paste in the code snippet: *Learn more about i18next configuration options here . This code is asynchronously fetching our strings from the i18nexus API. I’ve never had problems with load speed, but for production environments it is recommended to use the i18nexus CDN and implement browser caching. We won’t go over that in this tutorial, but you can learn more about that . here I’m going to import the i18n.js file in index.js, and then use React’s Suspense component to prevent rendering until the request is complete. My index.js file now looks like this: React, { Suspense } ; ReactDOM ; ; App ; * serviceWorker ; ;

ReactDOM.render( <Suspense fallback="loading">
      <App />
    </Suspense> import from "react" import from "react-dom" import "./index.css" import from "./App" import as from "./serviceWorker" import "./i18n.js" < > React.StrictMode ,
  document.getElementById("root")
);

serviceWorker.unregister(); </ > React.StrictMode Rendering our strings When the app loads, it is fetching all of our strings from i18nexus. Right now, my app just has the default create-react-app page with hardcoded strings: Let’s replace the text with our own strings! useTranslation To use our strings, we have to import the hook from react-i18next. This hook returns a function named that we can use to get a string by passing the as the first argument. useTranslation t key Back in i18nexus, the string I added has the key “welcome_msg”. Let’s render it. My App.js file now looks like this: React ; logo ; ; { useTranslation } ; { { t } = useTranslation(); ( <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{t("welcome_msg")}</p>
      </header>
    </div> import from "react" import from "./logo.svg" import "./App.css" import from "react-i18next" ( ) function App const return < = > div className "App" );
}

export default App; And here it is! Since my personal browser language is set to English, i18next has automatically chosen to render the English version of the string. This is thanks to the i18next-browser-languagedetector library! To let the user choose their language, you would simply create a dropdown that calls on change. Of course you can read more about all the i18next functions in the . i18next.changeLanguage(<language_code>) i18next docs For now, if you want to preview what your app would look like in another language, add the query parameter to the URL. If I load the app with , i18next will use the Spanish translations: lng http://localhost:3000/?lng=es AWESOME! Interpolation Let’s add another string to i18nexus that uses . (Learn more about i18next interpolation ) interpolation here In i18nexus, I’m going to create a string with the value “My name is {{name}}”. i18next uses double curly braces for interpolation: Now let’s use the function with interpolation: t React ; logo ; ; { useTranslation } ; { { t } = useTranslation(); userName = ; ( <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{t("welcome_msg")}</p>
        <p>{t("my_name", { name: userName })}</p>
      </header>
    </div> import from "react" import from "./logo.svg" import "./App.css" import from "react-i18next" ( ) function App const const "David" return < = > div className "App" );
}

export default App; And now we see the interpolated value: Your app has access to all strings and translations immediately after you add them to i18nexus. . I love it Now I’m going to add German to my project in the i18nexus dashboard: When you add another language to your i18nexus project, remember to update the parameter in your i18n.js file by adding the new language code to the array. supportedLngs Alternatively, you can copy/paste the code snippet from the Export tab again. I’m just going to manually add “de” to my : supportedLngs i18next
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({ : , : [ ], : , : [ , , ], : { : loadPath
    }
  }); fallbackLng "en" ns "default" defaultNS "default" supportedLngs "en" "es" "de" backend loadPath Now let’s visit to see our app in German: http://localhost:3000/?lng=de ( “ Awesome! Or should I say das ist fantastisch!”) To Sum It Up and are an amazing duo for scalable localization in React. We have only scratched the surface with the customization available in both i18next and i18nexus, but hopefully this was enough to get you up and going! Feel free to ask any questions in the comments. i18next i18nexus Also published at https://medium.com/javascript-in-plain-english/react-localization-the-winner-is-i18next-i18nexus-b7cd9f14094e

Too Long; Didn't Read

Making security fun one episode at a time

How to Use i18nexus with your React App for Scalable and Automated Localization

Too Long; Didn't Read

David Porter

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Use i18nexus with your React App for Scalable and Automated Localization

Too Long; Didn't Read

David Porter

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES