i18next-browser-languageDetector VS React

Install i18next-browser-languagedetector to simplify language detection in the frontend

There are many other options which you can pass for language detection which you can find in the documentation

The following package will detect the language automatically for us. So don’t have to worry about determining the currently selected language

I wish language selection in OS and Browser were easier to access... but your browser does send a language header with your request, which generally matches your browser.

Location based is and can be a pain. I live in a border state and often get spanish versions of sites... I also follow a couple prominent youtubers who post english and foreign language content, so sometimes get results in those languages, that I don't read.

That said, using the default for the browser, and allowing override isn't a bad thing... I usually look for something that looks like a flag in the upper right, for language selection. And the few times I've written multi-language sites/apps that's the UX I prefer to use. I would default to browser/header, I would respond to the change event, and if the user selects a preference, set a cookie and use that first.

Again, I do wish it were easier to switch for the browser itself.

1. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Ac...

2. https://github.com/i18next/i18next-browser-languageDetector/...

3. https://github.com/i18next/i18next-browser-languageDetector

4. https://developer.mozilla.org/en-US/docs/Web/API/Window/lang...

import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import LanguageDetector from "i18next-browser-languagedetector"; i18n // 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 }, resources: { en: { translation: { title: "i18n React project", english: "English", spanish: "Spanish", }, }, es: { translation: { title: "Proyecto i18n en React", english: "Ingles", spanish: "Español", }, }, }, }); export default i18n;

import I18NextVue from 'i18next-vue' import i18next from 'i18next' import Backend from 'i18next-locize-backend' import LanguageDetector from 'i18next-browser-languagedetector' import LastUsed from 'locize-lastused' import { locizePlugin } from 'locize' const isProduction = process.env.NODE_ENV === 'production' const locizeOptions = { projectId: process.env.VUE_APP_LOCIZE_PROJECTID, apiKey: process.env.VUE_APP_LOCIZE_APIKEY, // YOU should not expose your apps API key to production!!! version: process.env.VUE_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 i18next.use(LastUsed); } export const i18nextPromise = i18next // 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) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: !isProduction, fallbackLng: 'en', saveMissing: !isProduction, backend: locizeOptions, locizeLastUsed: locizeOptions }) export default function (app) { app.use(I18NextVue, { i18next }) return app }

import { hydrate } from 'react-dom' import { RemixBrowser } from 'remix' import i18next from 'i18next' import LanguageDetector from 'i18next-browser-languagedetector' import { initReactI18next } from 'react-i18next' import Backend from 'i18next-locize-backend' import LastUsed from 'locize-lastused' import { locizePlugin } from 'locize' import i18nextOptions from './i18nextOptions' const isProduction = process.env.NODE_ENV === 'production' const locizeOptions = { projectId: 'f6d74b76-9677-4a0d-b400-86e1507397ab', apiKey: !isProduction ? '1c2bbc21-027d-4f41-995a-e8beb451cdef' : undefined, // YOU should not expose your apps API key to production!!! version: isProduction ? 'production' : 'latest' } 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 i18next.use(LastUsed) } // initialize i18next using initReactI18next and configuring it if (!i18next.isInitialized) { // prevent i18next to be initialized multiple times i18next // 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({ ...i18nextOptions, detection: { caches: ['cookie'], lookupCookie: 'i18next' }, backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: !isProduction // you should not use saveMissing in production }) .then(() => { // then hydrate your app wrapped in the RemixI18NextProvider return hydrate( , document ) }) }

const getGreetingTime = () => { const split_afternoon = 12; // 24hr time to split the afternoon const split_evening = 17; // 24hr time to split the evening const currentHour = moment().hour(); if (currentHour >= split_afternoon && currentHour <= split_evening) { return 'afternoon'; } else if (currentHour >= split_evening) { return 'evening'; } return 'morning'; } const rerender = () => { // start localizing, details: // https://github.com/i18next/jquery-i18next#usage-of-selector-function $('body').localize(); $('#footerMessage').localize({ context: getGreetingTime() }); $('title').text($.t('head.title')) $('meta[name=description]').attr('content', $.t('head.description')) } const locizeOptions = { projectId: '8d751621-323e-4bda-94c8-7d2368102e62', apiKey: '302aca54-2ea8-4b9f-b5f0-df1369c59427' // YOU should not expose your apps API key to production!!! }; i18next.on('editorSaved', rerender); // used for the inContext editor $(function () { const locizeBackend = new i18nextLocizeBackend(locizeOptions, (err, opts, lngs) => { if (err) return console.error(err); // use plugins and options as needed, for options, detail see // https://www.i18next.com i18next // locize-editor // InContext Editor of locize .use(locize.locizePlugin) // locize-lastused (do not use this in production) // 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 .use(locizeLastUsed) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-backend .use(locizeBackend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(i18nextBrowserLanguageDetector) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ ...opts, debug: true, fallbackLng: 'en', backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: true // interpolation: { // // legacy usage // format: (value, format, lng) => { // if (value instanceof Date) { // return moment(value).locale(lng).format(format); // } // return value; // } // } }, (err, t) => { if (err) return console.error(err); // new usage i18next.services.formatter.add('LLLL', (value, lng, options) => { return moment(value).locale(lng).format('LLLL'); }); // for options see // https://github.com/i18next/jquery-i18next#initialize-the-plugin jqueryI18next.init(i18next, $, { useOptionsAttr: true }); // fill language switcher Object.keys(lngs).map((lng) => { const opt = new Option(lngs[lng].nativeName, lng); if (lng === i18next.resolvedLanguage) { opt.setAttribute("selected", "selected"); } $('#languageSwitcher').append(opt); }); let languageChangedCounter = 0; $('#languageSwitcher').change((a, b, c) => { const chosenLng = $(this).find("option:selected").attr('value'); i18next.changeLanguage(chosenLng, () => { rerender(); // language changed message languageChangedCounter++; $('#languageChangedNotification').localize({ count: languageChangedCounter }) if (languageChangedCounter === 1) { $('#languageChangedNotification').show(); } }); }); rerender(); $('#loader').hide(); $('#content').show(); }); }); });

In addition, we need to install i18next-http-backend which allows us to fetch translations from a directory, and i18next-browser-languagedetector which allows us to detect the user's language:

my go-to localization package is this: https://react.i18next.com/ used with https://github.com/i18next/i18next-browser-languageDetector

JavaScript React Flowbite Tailwind Firebase - Auth, Database, and Hosting Vite

Official Website Team GitHub Canary Releases

In the JavaScript ecosystem, there are guides for enabling SAML-based enterprise single sign-on in AdonisJS, Express.js, Next.js, Remix, and React with an Express.js backend.

What you have seen now works great especially when you are fetching data on the server, like in React Server Components using Next.js. But data fetching on the client side is often a bit more involved. At least what you want is for example some data loading indication and to know when the data is actually available in the client.

In addition to being a best practice, performance optimization in React is crucial since it affects the user experience directly. The speed and responsiveness of your React app are critical factors in determining its level of success in the modern digital world, where customers want seamless, quick, and uninterrupted experiences.

Familiarity with TypeScript, React and Next.js

We all know what React is at this point, but why use it with Vite and React Router DOM over something like NextJS?

Frameworks and Libraries: There are numerous JavaScript frameworks and libraries, such as React, Angular, and Vue.js, which simplify the development of complex web applications.

Javascript in the browser React - react is a library that gives developers an application programming interface (API) to manipulate the DOM (this is React's ReactDOM package). React uses components and JSX to make building reusable code easier. docs JSX - is a syntax extension for React Javascript code that lets you write HTML-like markup in a javascript file. This makes it easier to write reusable HTML. docs State - a key react concept that guides setting and storage of data between renders. docs Hooks - a key react concept for logic triggered by state change docs Vue - is a framework for building web interfaces. Vue is lightweight and best for small projects prioritizing speed over functionality. doc Angular - web development framework. Angular is best for dynamic more feature rich sites. docs