Internationalization framework for JavaScript applications with flexible backend support and plugin ecosystem
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Loading, storing, and managing translation resources including namespaces, resource bundles, and dynamic resource manipulation.
Load translation resources from configured backends or other sources.
/**
* Load translation resources
* @param language - Specific language to load (optional)
* @param callback - Optional callback when loading completes
*/
function loadResources(language?: string, callback?: (err: any) => void): void;
function loadResources(callback?: (err: any) => void): void;Usage Examples:
import i18next from "i18next";
// Load all configured resources
i18next.loadResources((err) => {
if (err) return console.error("Failed to load resources:", err);
console.log("Resources loaded successfully");
});
// Load resources for specific language
i18next.loadResources("de", (err) => {
if (err) return console.error("Failed to load German resources:", err);
console.log("German resources loaded");
});Reload translation resources, optionally for specific languages and namespaces.
/**
* Reload translation resources
* @param lngs - Languages to reload (optional)
* @param ns - Namespaces to reload (optional)
* @param callback - Optional callback when reloading completes
* @returns Promise resolving when reloading completes
*/
function reloadResources(
lngs?: string | readonly string[],
ns?: string | readonly string[],
callback?: () => void
): Promise<void>;
function reloadResources(callback?: () => void): Promise<void>;Usage Examples:
// Reload all resources
await i18next.reloadResources();
// Reload specific languages
await i18next.reloadResources(["en", "de"]);
// Reload specific namespaces
await i18next.reloadResources(null, ["common", "navigation"]);
// Reload specific languages and namespaces
await i18next.reloadResources(["en", "de"], ["common"]);
// With callback
i18next.reloadResources((err) => {
if (err) return console.error("Reload failed:", err);
console.log("Resources reloaded");
});Add a single translation key-value pair.
/**
* Add a single resource key-value pair
* @param lng - Language code
* @param ns - Namespace
* @param key - Translation key
* @param value - Translation value
* @param options - Additional options
* @returns i18next instance for chaining
*/
function addResource(
lng: string,
ns: string,
key: string,
value: string,
options?: { keySeparator?: string; silent?: boolean }
): i18n;Usage Examples:
// Add single translation
i18next.addResource("en", "translation", "newKey", "New Translation");
// Add with nested key
i18next.addResource("en", "common", "buttons.save", "Save");
// Add multiple translations via chaining
i18next
.addResource("en", "common", "buttons.save", "Save")
.addResource("en", "common", "buttons.cancel", "Cancel")
.addResource("de", "common", "buttons.save", "Speichern");
// Add with options
i18next.addResource("en", "translation", "greeting", "Hello", {
keySeparator: false, // Treat "." as literal character
silent: true // Don't emit events
});Add multiple translation key-value pairs at once.
/**
* Add multiple resources for a language and namespace
* @param lng - Language code
* @param ns - Namespace
* @param resources - Resource object with key-value pairs
* @returns i18next instance for chaining
*/
function addResources(lng: string, ns: string, resources: any): i18n;Usage Examples:
// Add multiple flat resources
i18next.addResources("en", "common", {
"save": "Save",
"cancel": "Cancel",
"delete": "Delete"
});
// Add nested resources
i18next.addResources("en", "navigation", {
"menu": {
"home": "Home",
"about": "About",
"contact": "Contact"
},
"breadcrumb": {
"home": "Home",
"current": "Current Page"
}
});
// Chain multiple additions
i18next
.addResources("en", "buttons", {
"save": "Save",
"cancel": "Cancel"
})
.addResources("de", "buttons", {
"save": "Speichern",
"cancel": "Abbrechen"
});Add a complete resource bundle for a language and namespace.
/**
* Add a complete resource bundle
* @param lng - Language code
* @param ns - Namespace
* @param resources - Complete resource bundle
* @param deep - Merge deeply into existing resources
* @param overwrite - Overwrite existing keys
* @returns i18next instance for chaining
*/
function addResourceBundle(
lng: string,
ns: string,
resources: any,
deep?: boolean,
overwrite?: boolean
): i18n;Usage Examples:
// Add complete bundle (replaces existing)
i18next.addResourceBundle("en", "common", {
"buttons": {
"save": "Save",
"cancel": "Cancel",
"delete": "Delete"
},
"messages": {
"success": "Operation successful",
"error": "An error occurred"
}
});
// Deep merge with existing resources
i18next.addResourceBundle("en", "common", {
"buttons": {
"edit": "Edit", // Adds to existing buttons
"save": "Save Changes" // Updates existing save button
}
}, true); // deep = true
// Overwrite existing keys
i18next.addResourceBundle("en", "common", {
"buttons": {
"save": "Save Document"
}
}, false, true); // deep = false, overwrite = trueCheck, get, and remove resource bundles.
/**
* Check if resource bundle exists
* @param lng - Language code
* @param ns - Namespace
* @returns True if bundle exists
*/
function hasResourceBundle(lng: string, ns: string): boolean;
/**
* Get resource bundle
* @param lng - Language code
* @param ns - Namespace
* @returns Resource bundle object
*/
function getResourceBundle(lng: string, ns: string): any;
/**
* Remove resource bundle
* @param lng - Language code
* @param ns - Namespace
* @returns i18next instance for chaining
*/
function removeResourceBundle(lng: string, ns: string): i18n;Usage Examples:
// Check if bundle exists
if (i18next.hasResourceBundle("en", "admin")) {
console.log("Admin translations available");
}
// Get entire bundle
const commonBundle = i18next.getResourceBundle("en", "common");
console.log("Common translations:", commonBundle);
// Remove bundle
i18next.removeResourceBundle("en", "deprecated");
// Conditional operations
if (i18next.hasResourceBundle("en", "beta")) {
const betaFeatures = i18next.getResourceBundle("en", "beta");
// Use beta translations
} else {
// Load beta resources
await i18next.loadNamespaces("beta");
}Get individual resource values directly.
/**
* Get a single resource value
* @param lng - Language code
* @param ns - Namespace
* @param key - Resource key
* @param options - Key parsing options
* @returns Resource value
*/
function getResource(
lng: string,
ns: string,
key: string,
options?: Pick<InitOptions, 'keySeparator' | 'ignoreJSONStructure'>
): any;
/**
* Get all data for a specific language
* @param lng - Language code
* @returns All resources for the language
*/
function getDataByLanguage(lng: string): { [key: string]: { [key: string]: string } } | undefined;Usage Examples:
// Get specific resource
const saveText = i18next.getResource("en", "common", "buttons.save");
console.log(saveText); // "Save"
// Get with custom key separator
const customResource = i18next.getResource("en", "translation", "key->nested", {
keySeparator: "->"
});
// Get all data for a language
const allEnglish = i18next.getDataByLanguage("en");
console.log("All English resources:", allEnglish);
// Returns: { common: { ... }, navigation: { ... }, ... }
// Check if resource exists before getting
if (i18next.exists("buttons.save")) {
const buttonText = i18next.getResource("en", "common", "buttons.save");
}Managing translation namespaces for organized resource structure.
Load additional namespaces not defined in initialization.
/**
* Load additional namespaces
* @param ns - Namespace(s) to load
* @param callback - Optional callback when loading completes
* @returns Promise resolving when loading completes
*/
function loadNamespaces(ns: string | readonly string[], callback?: Callback): Promise<void>;Usage Examples:
// Load single namespace
await i18next.loadNamespaces("admin");
// Load multiple namespaces
await i18next.loadNamespaces(["admin", "reports", "settings"]);
// With callback
i18next.loadNamespaces("dashboard", (err) => {
if (err) return console.error("Failed to load dashboard namespace:", err);
console.log("Dashboard translations loaded");
});
// Conditional namespace loading
if (user.isAdmin) {
await i18next.loadNamespaces("admin");
}Check if namespaces are loaded and available.
/**
* Check if namespace has been loaded
* @param ns - Namespace(s) to check
* @param options - Check options
* @returns True if namespace is loaded
*/
function hasLoadedNamespace(
ns: string | readonly string[],
options?: {
lng?: string | readonly string[];
fallbackLng?: InitOptions['fallbackLng'];
precheck?: (
i18n: i18n,
loadNotPending: (
lng: string | readonly string[],
ns: string | readonly string[]
) => boolean
) => boolean | undefined;
}
): boolean;Usage Examples:
// Check single namespace
if (i18next.hasLoadedNamespace("admin")) {
console.log("Admin namespace is available");
}
// Check multiple namespaces
if (i18next.hasLoadedNamespace(["common", "navigation"])) {
console.log("Core namespaces are loaded");
}
// Check for specific language
if (i18next.hasLoadedNamespace("reports", { lng: "de" })) {
console.log("German reports namespace is loaded");
}
// With custom precheck
const isLoaded = i18next.hasLoadedNamespace("analytics", {
precheck: (i18n, loadNotPending) => {
// Custom logic to determine if namespace should be considered loaded
return loadNotPending("en", "analytics");
}
});Manage the default namespace for translations.
/**
* Set the default namespace
* @param ns - Namespace to set as default
*/
function setDefaultNamespace(ns: string | readonly string[]): void;Usage Examples:
// Set single default namespace
i18next.setDefaultNamespace("common");
// Set multiple default namespaces (first one is primary)
i18next.setDefaultNamespace(["common", "shared"]);
// Now translations without explicit namespace use the default
i18next.t("welcome"); // Uses "common:welcome"
// Access current default namespace
console.log(i18next.options.defaultNS); // "common"Direct access to the internal resource store for advanced operations.
interface ResourceStore {
/** Resource data organized by language and namespace */
data: Resource;
/** Configuration options */
options: InitOptions;
/** Add event listener for resource changes */
on(event: 'added' | 'removed', callback: (lng: string, ns: string) => void): void;
/** Remove event listener */
off(event: 'added' | 'removed', callback?: (lng: string, ns: string) => void): void;
}
interface Resource {
[language: string]: {
[namespace: string]: ResourceLanguage;
};
}
interface ResourceLanguage {
[key: string]: any;
}Usage Examples:
// Access resource store directly
const store = i18next.store;
// View all loaded data
console.log("All resources:", store.data);
// Access specific language resources
const englishResources = store.data.en;
console.log("English namespaces:", Object.keys(englishResources));
// Listen for resource changes
store.on("added", (lng, ns) => {
console.log(`Resources added: ${lng}:${ns}`);
});
store.on("removed", (lng, ns) => {
console.log(`Resources removed: ${lng}:${ns}`);
});
// Example resource structure:
// {
// "en": {
// "common": { "save": "Save", "cancel": "Cancel" },
// "navigation": { "home": "Home", "about": "About" }
// },
// "de": {
// "common": { "save": "Speichern", "cancel": "Abbrechen" },
// "navigation": { "home": "Startseite", "about": "Über uns" }
// }
// }