Language detection, switching, and text direction handling for i18next-client.
Change the current language with optional reinitialization.
/**
* Set current language and optionally reinitialize
* @param lng - Language code to set
* @param options - Reinitialization options
* @param callback - Function called when language change completes
*/
function setLng(lng, options, callback): void;
/**
* Get current language code
* @returns Current language code
*/
function lng(): string;Usage Examples:
// Simple language change
i18n.setLng('es', function(t) {
console.log('Language changed to Spanish');
console.log(t('welcome')); // Now returns Spanish translation
});
// Language change with options
i18n.setLng('fr', {
resGetPath: 'locales/__lng__/__ns__.json',
useLocalStorage: true
}, function(t) {
console.log('Language changed to French with custom options');
});
// Get current language
const currentLang = i18n.lng();
console.log('Current language:', currentLang); // e.g., "en-US"
// Check language before changing
if (i18n.lng() !== 'es') {
i18n.setLng('es', function() {
console.log('Switched to Spanish');
});
}Automatic language detection from various sources.
/**
* Detect language from browser, URL, cookies, and localStorage
* @returns Detected language code or fallback
*/
function detectLanguage(): string;Usage Examples:
// Detect and use browser language
const detectedLang = i18n.detectLanguage();
console.log('Detected language:', detectedLang);
// Use detected language during initialization
i18n.init({
lng: i18n.detectLanguage(), // Use detected language
fallbackLng: 'en',
resGetPath: 'locales/__lng__/__ns__.json'
}, function(t) {
console.log('Initialized with detected language');
});
// Manual detection with fallback
const userLang = i18n.detectLanguage() || 'en';
i18n.setLng(userLang);Get text direction for right-to-left (RTL) language support.
/**
* Get text direction for current language
* @returns 'ltr' for left-to-right or 'rtl' for right-to-left
*/
function dir(): string;Usage Examples:
// Get text direction for current language
const direction = i18n.dir();
console.log('Text direction:', direction); // 'ltr' or 'rtl'
// Apply direction to document
document.dir = i18n.dir();
document.documentElement.setAttribute('dir', i18n.dir());
// CSS class based on direction
document.body.className = 'dir-' + i18n.dir();
// Conditional styling
if (i18n.dir() === 'rtl') {
document.body.classList.add('rtl');
} else {
document.body.classList.add('ltr');
}
// React/framework integration
const isRTL = i18n.dir() === 'rtl';Restore previous global i18n reference to avoid conflicts.
/**
* Restore previous window.i18n reference and return i18next
* @returns i18next instance
*/
function noConflict(): object;Usage Examples:
// Store reference before potential conflict
const myI18n = i18n.noConflict();
// Use your instance
myI18n.init({
lng: 'en',
// ... options
}, function(t) {
console.log(myI18n.t('welcome'));
});
// If there was a previous window.i18n, it's now restoredThe
detectLanguage()// URL: https://example.com/?setLng=es
i18n.init({
detectLngQS: 'setLng' // Parameter name (default)
});i18n.init({
useCookie: true,
cookieName: 'i18next', // Cookie name (default)
cookieExpirationTime: 365 * 24 * 60 * 60 * 1000 // 1 year
});i18n.init({
detectLngFromLocalStorage: true
});
// Stores in localStorage key 'i18next_lng'// Automatically detects from:
// - navigator.languages (Chrome)
// - navigator.userLanguage (IE)
// - navigator.language (standard)i18n.init({
fallbackLng: 'en' // Used if no language detected
});Comprehensive right-to-left language support with automatic detection:
// RTL languages automatically detected:
const rtlLanguages = [
'ar', 'he', 'fa', 'ur', 'yi', 'ji', 'iw', 'ps', 'dv'
// ... and many more Arabic, Hebrew, Persian variants
];
// Usage examples
i18n.setLng('ar', function() {
console.log(i18n.dir()); // 'rtl'
document.documentElement.dir = i18n.dir();
});
i18n.setLng('en', function() {
console.log(i18n.dir()); // 'ltr'
document.documentElement.dir = i18n.dir();
});
// CSS integration
.content {
text-align: left;
}
[dir="rtl"] .content {
text-align: right;
}Automatic language persistence across sessions:
i18n.init({
// Cookie persistence
useCookie: true,
cookieName: 'i18next',
cookieExpirationTime: 365 * 24 * 60 * 60 * 1000, // 1 year
cookieDomain: '.example.com', // Optional domain
// localStorage persistence
detectLngFromLocalStorage: true,
// Detection priority: QS > Cookie > localStorage > Navigator > Fallback
detectLngQS: 'lang',
fallbackLng: 'en'
}, function(t) {
console.log('Language persisted and restored');
});
// Manual persistence
i18n.setLng('es', function() {
// Language is automatically saved to cookie/localStorage
// Will be restored on next page load
});function createLanguageSwitcher(languages) {
const currentLang = i18n.lng();
languages.forEach(lang => {
const button = document.createElement('button');
button.textContent = lang.name;
button.className = lang.code === currentLang ? 'active' : '';
button.addEventListener('click', () => {
i18n.setLng(lang.code, function(t) {
// Update UI
document.querySelector('[data-i18n="welcome"]').textContent = t('welcome');
// Update direction
document.documentElement.dir = i18n.dir();
// Update active state
document.querySelectorAll('.lang-button').forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');
});
});
document.querySelector('.language-switcher').appendChild(button);
});
}
// Usage
createLanguageSwitcher([
{ code: 'en', name: 'English' },
{ code: 'es', name: 'Español' },
{ code: 'ar', name: 'العربية' },
{ code: 'he', name: 'עברית' }
]);function loadLanguageOnDemand(langCode) {
return new Promise((resolve, reject) => {
if (i18n.hasResourceBundle(langCode)) {
// Already loaded
resolve();
return;
}
// Load language resources
i18n.loadNamespaces(['translation', 'common'], () => {
i18n.setLng(langCode, (err, t) => {
if (err) {
reject(err);
} else {
resolve(t);
}
});
});
});
}
// Usage
loadLanguageOnDemand('fr').then(() => {
console.log('French loaded and activated');
}).catch(err => {
console.error('Failed to load French:', err);
});