react-i18next
i18next-http-backend
Our great sponsors
react-i18next | i18next-http-backend | |
---|---|---|
70 | 6 | |
8,934 | 415 | |
1.5% | 2.9% | |
8.9 | 7.5 | |
24 days ago | 8 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.
react-i18next
-
Pains and solutions in localization for the web
In a recent project I've been using react-i18next so I'll use its syntax for the examples, but pretty much every library works similarly.
-
45 NPM Packages to Solve 16 React Problems
react-i18next
-
React Ecosystem in 2024
i18next - You can find documentation and resources for using i18next at react.i18next.com. i18next is a popular internationalization framework for JavaScript, including React. It provides a comprehensive solution for handling translations, formatting, and more.
-
Enforcing Localization through Types
So far, we’ve been using a utility createLocalizedString to create and use the LocalizedString type. This utility is only really practical in unit tests. For real applications, we’ll want to use a translation function from react-i18next or next-i18next to do the heavy lifting. Then we just wrap the translation functions that are provided in order to use our type:
-
5 Not-So-Typical React Libraries for an Outstanding Project
Website: https://react.i18next.com/
-
Is it a good practice to centralized messages file
If you are talking about handling translations for your application, take a look at https://react.i18next.com/
-
Looking for a few iOS devs that are interested in getting their apps localized.
I will be supporting Korean as a part of the beta. I have to look deeper into https://react.i18next.com/ in order to understand what it provides. My goal is for engineers to be able to click a single button and have localizations always up to date in their codebase, not delaying shipping a new version or having to even think about it.
-
Supercharge Your TypeScript App: Mastering i18next for Type-Safe Translations
With the new react-i18next version, when loading multiple namespaces, t function will infer and accept the keys for the first namespace. So this pattern is now accepted:
-
React Ecosystem in 2023.
react-i18next
-
App translation with React-i18next
In this article I will show you how to translate your React app with React-i18next and give a few examples that you may find useful!
i18next-http-backend
-
Supercharge Your TypeScript App: Mastering i18next for Type-Safe Translations
A React.js based i18next setup with in-memory translation resources could also look very similar to the above example, so let's raise the bar a little bit and see what a setup with lazy loading translations like with i18next-http-backend looks like:
-
Implement multi-language Support in React
The next package will load the values depending on the language returned by the language detector.
-
How to properly internationalize a Vue application using i18next
import i18next from 'i18next' import I18NextVue from 'i18next-vue' import LanguageDetector from 'i18next-browser-languagedetector' import Backend from 'i18next-http-backend' export const i18nextPromise = i18next // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-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: true, fallbackLng: 'en' }); export default function (app) { app.use(I18NextVue, { i18next }) return app }
-
The progressive guide to jQuery internationalization (i18n) using i18next
// ... $(function () { // use plugins and options as needed, for options, detail see // https://www.i18next.com i18next // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-backend .use(i18nextHttpBackend) // 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({ debug: true, fallbackLng: 'en' }, (err, t) => { if (err) return console.error(err); // ... }); });
-
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:
-
How to properly internationalize a React application using i18next
import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import Backend from 'i18next-http-backend'; import { DateTime } from 'luxon'; i18n // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-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; } }, resources: { en: { translation: { description: { part1: 'Edit <1>src/App.js and save to reload.', part2: 'Learn React' }, counter: 'Changed language just once', counter_plural: 'Changed language already {{count}} times', footer: { date: 'Today is {{date, DATE_HUGE}}', date_morning: 'Good morning! Today is {{date, DATE_HUGE}} | Have a nice day!', date_afternoon: 'Good afternoon! It\'s {{date, DATE_HUGE}}', date_evening: 'Good evening! Today was the {{date, DATE_HUGE}}' } } }, de: { translation: { description: { part1: 'Ändere <1>src/App.js und speichere um neu zu laden.', part2: 'Lerne React' }, counter: 'Die Sprache wurde erst ein mal gewechselt', counter_plural: 'Die Sprache wurde {{count}} mal gewechselt', footer: { date: 'Heute ist {{date, DATE_HUGE}}', date_morning: 'Guten Morgen! Heute ist {{date, DATE_HUGE}} | Wünsche einen schönen Tag!', date_afternoon: 'Guten Tag! Es ist {{date, DATE_HUGE}}', date_evening: 'Guten Abend! Heute war {{date, DATE_HUGE}}' } } } } }); export default i18n;
What are some alternatives?
React Intl - The monorepo home to all of the FormatJS related libraries, most notably react-intl.
i18next-browser-languageDetector - language detector used in browser environment for i18next
next-i18next - The easiest way to translate your NextJs apps.
i18next-locize-backend - A simple i18next backend for locize.com which can be used in Node.js, in the browser and for Deno.
jsLingui - 🌍 📖 A readable, automated, and optimized (3 kb) internationalization for JavaScript
Luxon - ⏱ A library for working with dates and times in JS
i18next - i18next: learn once - translate everywhere
jquery-i18next - jQuery-i18next is a jQuery based Javascript internationalization library on top of i18next. It helps you to easily internationalize your web applications.
nextjs-monorepo-example - Collection of monorepo tips & tricks
http - An isomorphic http client for Svelte applications
transloco - 🚀 😍 The internationalization (i18n) library for Angular