i18next-browser-languageDetector VS jquery-i18next

Compare i18next-browser-languageDetector vs jquery-i18next and see what are their differences.

i18next-browser-languageDetector

language detector used in browser environment for i18next (by i18next)

jquery-i18next

jQuery-i18next is a jQuery based Javascript internationalization library on top of i18next. It helps you to easily internationalize your web applications. (by i18next)
Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
i18next-browser-languageDetector jquery-i18next
11 1
808 167
2.4% 1.8%
5.9 2.8
5 months ago 10 months ago
JavaScript HTML
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

i18next-browser-languageDetector

Posts with mentions or reviews of i18next-browser-languageDetector. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-08-09.
  • Building a multilingual NextJS app using the new app directory
    5 projects | dev.to | 9 Aug 2023
    Install i18next-browser-languagedetector to simplify language detection in the frontend
  • From Mono to Multilingual: Supercharge Your React App with i18n
    2 projects | dev.to | 21 May 2023
    There are many other options which you can pass for language detection which you can find in the documentation
  • Implement multi-language Support in React
    2 projects | dev.to | 10 May 2023
    The following package will detect the language automatically for us. So don’t have to worry about determining the currently selected language
  • The Framework Laptop 16
    5 projects | news.ycombinator.com | 24 Mar 2023
    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...

  • Internationalization with ReactJS and i18n
    3 projects | dev.to | 1 Jul 2022
    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;
  • How to properly internationalize a Vue application using i18next
    8 projects | dev.to | 15 May 2022
    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 }
  • How to internationalize a Remix application (Part 2)
    7 projects | dev.to | 3 Mar 2022
    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 ) }) }
  • The progressive guide to jQuery internationalization (i18n) using i18next
    8 projects | dev.to | 2 Feb 2022
    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(); }); }); });
  • How to Internationalize a React App
    8 projects | dev.to | 2 Sep 2021
    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:
  • Which i18 library for text with icons?
    2 projects | /r/reactjs | 7 May 2021
    my go-to localization package is this: https://react.i18next.com/ used with https://github.com/i18next/i18next-browser-languageDetector

jquery-i18next

Posts with mentions or reviews of jquery-i18next. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-02-02.
  • The progressive guide to jQuery internationalization (i18n) using i18next
    8 projects | dev.to | 2 Feb 2022
    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(); }); }); });

What are some alternatives?

When comparing i18next-browser-languageDetector and jquery-i18next you can also consider the following projects:

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

react-tutorial

i18next - i18next: learn once - translate everywhere

react-i18n-tutorial - Tutorial for Internationalization In React

remix-i18next - The easiest way to translate your Remix apps

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

moment - Parse, validate, manipulate, and display dates in javascript.

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

infinite-scroll - 📜 Automatically add next page

React - The library for web and native user interfaces.