i18next-browser-languageDetector
Luxon
Our great sponsors
i18next-browser-languageDetector | Luxon | |
---|---|---|
11 | 30 | |
809 | 14,782 | |
2.4% | 1.0% | |
5.9 | 7.8 | |
5 months ago | 12 days ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
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
-
Building a multilingual NextJS app using the new app directory
Install i18next-browser-languagedetector to simplify language detection in the frontend
-
From Mono to Multilingual: Supercharge Your React App with i18n
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
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
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
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
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)
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
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
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?
my go-to localization package is this: https://react.i18next.com/ used with https://github.com/i18next/i18next-browser-languageDetector
Luxon
-
A bug which is only a bug five days out of the year
To be honest, use a library where someone else figured out the ambiguities and accounted for the edge cases. Good starting point: https://moment.github.io/luxon/#/math
Date-fns is fine for simpler use cases but Luxon is a lot more complete, especially where it comes to time zones.
You should never, ever do date math naively like this. There are too many unexpected edge case, especially between time zones or daylight savings time or leap years, but even without them: https://moment.github.io/luxon/#/math
In fact I would strongly argue you should never use the JS Date built-in at all because they are terrible. Use a library like Luxon or date-fns. As a frontend dev, this is the most common category of bugs I've dealt with in my career, and I've spent dozens of hours fixing other people's datetime handling because of how poorly implemented the JS Date API is. It's full of minefields and gotchas.
The Temporal API is supposed to fix some issues, but that's been in development for like a decade now.
-
Top 10 react packages for SaaS platforms
8. Luxon: Mastering Time and Timezones for Precision Data Handling
-
What library do you use to handle dates?
In past i used Moment, but I read that we should avoid to use it for future projects. I read someone suggested to use Datejs, but it doesn't seems to be updated, last time was 8 years ago. Currently I'm thinking to use Luxon but I someone suggest Date-fns also.
-
Googling be like
Pain
-
23 of the best Eleventy Themes (Starters) for 2023
Eleventyone’s project scaffold includes: Eleventy with a skeleton site, a date format filter for Nunjucks based on Luxon, a tiny CSS pipeline with PostCSS, an equally tiny inline JS pipeline, JS search index generator, Netlify Dev for testing Netlify redirects, and a serverless (FaaS) development pipeline with Netlify Dev and Netlify Functions.
-
Effortlessly handle dates and times in JavaScript with Luxon
Alternatively, you can download the latest version from the GitHub releases page and include it in your project manually (but you really shouldn't)
Luxon is a powerful and lightweight JavaScript library for working with dates and times. It was created as an alternative to the popular Moment.js library, with the goal of being faster, smaller, and easier to use.
-
Day.js Fast 2kB alternative to Moment.js with the same modern API
But how does this compare to Luxon? (https://moment.github.io/luxon/#/why)
- converting seconds to human readable form
What are some alternatives?
dayjs - ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API
date-fns - ⏳ Modern JavaScript date utility library ⌛️
moment - Parse, validate, manipulate, and display dates in javascript.
moment-timezone - Timezone support for moment.js
js-joda - :clock2: Immutable date and time library for javascript
countdown.js - Super simple countdowns.
proposal-temporal - Provides standard objects and functions for working with dates and times.
date - Date() for humans
i18next-http-backend - i18next-http-backend is a backend layer for i18next using in Node.js, in the browser and for Deno.
i18next - i18next: learn once - translate everywhere
jquery-timeago - :clock8: The original jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago").
timeago.js - :clock8: :hourglass: timeago.js is a tiny(2.0 kb) library used to format date with `*** time ago` statement.