How to properly internationalize a React application using i18next

1. i18next-browser-languageDetector

   1 12 902 6.9 JavaScript

   language detector used in browser environment for i18next

   

2. SurveyJS

   surveyjs.io featured

   JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.

   

3. i18next-http-backend

   2 7 479 7.5 JavaScript

   i18next-http-backend is a backend layer for i18next using in Node.js, in the browser and for Deno.

   

4. react-tutorial

   3 1 25 1.9 JavaScript

   

   Now your app looks still the same, but your translations are separated. If you want to support a new language, you just create a new folder and a new translation json file. This gives you the possibility to send the translations to some translators. Or if you're working with a translation management system you can just synchronize the files with a cli.

5. i18next-locize-backend

   4 6 73 7.5 JavaScript

   A simple i18next backend for locize.com which can be used in Node.js, in the browser and for Deno.

   

   import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import Backend from 'i18next-locize-backend'; import LastUsed from 'locize-lastused'; import { locizePlugin } from 'locize'; import { DateTime } from 'luxon'; const isProduction = process.env.NODE_ENV === 'production'; const locizeOptions = { projectId: process.env.REACT_APP_LOCIZE_PROJECTID, apiKey: process.env.REACT_APP_LOCIZE_APIKEY, // YOU should not expose your apps API key to production!!! referenceLng: process.env.REACT_APP_LOCIZE_REFLNG, version: process.env.REACT_APP_LOCIZE_VERSION }; if (!isProduction) { // locize-lastused // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused i18n.use(LastUsed); } i18n // locize-editor // InContext Editor of locize .use(locizePlugin) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-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({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, // not needed for react as it escapes by default format: (value, format, lng) => { if (value instanceof Date) { return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format]) } return value; } }, backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: !isProduction // you should not use saveMissing in production }); export default i18n;

6. locize-lastused

   5 5 3 6.6 JavaScript

   Using API lastUsed using in node.js, in the browser and for deno.

   

   import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import Backend from 'i18next-locize-backend'; import LastUsed from 'locize-lastused'; import { locizePlugin } from 'locize'; import { DateTime } from 'luxon'; const isProduction = process.env.NODE_ENV === 'production'; const locizeOptions = { projectId: process.env.REACT_APP_LOCIZE_PROJECTID, apiKey: process.env.REACT_APP_LOCIZE_APIKEY, // YOU should not expose your apps API key to production!!! referenceLng: process.env.REACT_APP_LOCIZE_REFLNG, version: process.env.REACT_APP_LOCIZE_VERSION }; if (!isProduction) { // locize-lastused // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused i18n.use(LastUsed); } i18n // locize-editor // InContext Editor of locize .use(locizePlugin) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-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({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, // not needed for react as it escapes by default format: (value, format, lng) => { if (value instanceof Date) { return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format]) } return value; } }, backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: !isProduction // you should not use saveMissing in production }); export default i18n;

7. locize

   6 7 14 8.3 JavaScript

   locize InContextEditor postMessage API

   

   import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import Backend from 'i18next-locize-backend'; import LastUsed from 'locize-lastused'; import { locizePlugin } from 'locize'; import { DateTime } from 'luxon'; const isProduction = process.env.NODE_ENV === 'production'; const locizeOptions = { projectId: process.env.REACT_APP_LOCIZE_PROJECTID, apiKey: process.env.REACT_APP_LOCIZE_APIKEY, // YOU should not expose your apps API key to production!!! referenceLng: process.env.REACT_APP_LOCIZE_REFLNG, version: process.env.REACT_APP_LOCIZE_VERSION }; if (!isProduction) { // locize-lastused // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused i18n.use(LastUsed); } i18n // locize-editor // InContext Editor of locize .use(locizePlugin) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-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({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, // not needed for react as it escapes by default format: (value, format, lng) => { if (value instanceof Date) { return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format]) } return value; } }, backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: !isProduction // you should not use saveMissing in production }); export default i18n;

8. locize-cli

   7 6 65 8.1 JavaScript

   locize cli to import / export locales, add / edit / remove, sync segments

   

   First in locize, create a dedicated version for production. Do not enable auto publish for that version but publish manually or via API or via CLI. Lastly, enable Cache-Control max-age​ for that production version.

9. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

10. i18next

    8 69 8,095 8.9 JavaScript

    i18next: learn once - translate everywhere

    

11. React

    9 1,936 235,634 9.9 JavaScript

    The library for web and native user interfaces.

    

    import logo from './logo.svg'; import './App.css'; import { useTranslation, Trans } from 'react-i18next'; import { useState, Suspense, useEffect } from 'react'; import Footer from './Footer' function App() { const { t, i18n } = useTranslation(); const [count, setCounter] = useState(0); const [lngs, setLngs] = useState({ en: { nativeName: 'English' }}); useEffect(() => { i18n.services.backendConnector.backend.getLanguages((err, ret) => { if (err) return // TODO: handle err... setLngs(ret); }); }, []); return (

    

    {Object.keys(lngs).map((lng) => ( { i18n.changeLanguage(lng); setCounter(count + 1); }}> {lngs[lng].nativeName} ))}

    {t('counter', { count })}

    Edit src/App.js and save to reload.

    {t('description.part2')}

    ); } // here app catches the suspense from page in case translations are not yet loaded export default function WrappedApp() { return ( ); }

12. react-i18next

    10 75 9,562 8.5 JavaScript

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

    

    Make sure you have Node.js and npm installed. It's best, if you have some experience with simple HTML, JavaScript and basic React.js, before jumping to react-i18next.

13. Luxon

    11 32 15,895 7.3 JavaScript

    ⏱ A library for working with dates and times in JS

    

    Now, let’s check out how we can use different date formats with the help of i18next and Luxon to handle date and time.

14. create-react-app

    12 604 103,237 6.8 JavaScript

    Set up a modern web app by running one command.

    

    Take your own React project or create a new one, i.e. with create-react-app.

Suggest a related project