A lightweight centralized label management utility for TypeScript/JavaScript applications.
LabelContainer provides a structured way to store, retrieve, and localize UI labels across your app using a simple API and a built-in fallback mechanism.
- 🧩 Centralized label storage — manage all text labels in one place
- 🌐 Multi-language support — organize translations by language
- 📄 Page-level scoping — manage labels per page or component
- 🧠 Built-in fallbacks — automatic fallback to
GLOBALpage or English (en) labels - ♻️ Singleton pattern — maintain one consistent label state throughout your app
- 🧪 Full TypeScript support with included types (
Labels,LangLabels,LabelBlock)
npm install labelcontainer
# or
yarn add labelcontainerLabels follow a two-level nested map:
- First layer → groups labels by page (e.g.
HOME,DETAILS,SEARCH) - Second layer → groups labels by language code (e.g.
en,fr,sp)
Each language block (LabelBlock) is a simple object mapping label keys to string values.
import { Labels } from 'labelcontainer/build/types';
export const LABELS: Labels = {
GLOBAL: {
en: {
title: "Test Title",
card_msg: "Lorem ipsum dolor sit amet.",
},
sp: {
title: "Título de la Prueba",
card_msg: "Mensaje de ejemplo.",
},
},
PAGE_A: {
en: {
title: "Page A Title",
button_text: "Submit",
},
},
};Tip: Always include English (en) as a fallback language to ensure coverage.
Since LabelContainer is a singleton, you only initialize it once:
import LabelContainer from 'labelcontainer';
import { LABELS } from './labels';
const labelInstance = LabelContainer.getInstance({
labels: LABELS,
page: 'PAGE_A',
language: 'en',
});Subsequent calls to getInstance() will return the same instance.
You can update the current page or language anytime:
labelInstance.setPage('PAGE_A');
labelInstance.setLanguage('sp');
console.log(labelInstance.getPage()); // "PAGE_A"
console.log(labelInstance.getLanguage()); // "sp"To fetch a label string, use:
labelInstance.getLabel('title'); // → "Título de la Prueba"When retrieving a label, LabelContainer automatically:
- Falls back to the
GLOBALpage if the current page is not found. - Falls back to
en(English) if the requested language doesn’t exist. - Returns the
keyitself if the label cannot be found anywhere.
labelInstance.setPage('UNKNOWN_PAGE');
labelInstance.setLanguage('de');
labelInstance.getLabel('title'); // → "Test Title" (from GLOBAL → en)You can check whether a label exists:
labelInstance.hasLabel('button_text'); // → true
labelInstance.hasLabel('missing_key'); // → falseRetrieve a list of all languages defined across your label set:
labelInstance.getAllLanguages();
// → ['en', 'sp']Unit tests are written in Jest. To run them locally:
npm install
npm testThe test suite covers:
- Singleton behavior
- Page/language management
- Label retrieval and fallbacks
- Label existence and language listing
| Type | Description |
|---|---|
LabelBlock |
Record<string, string> – map of label keys to text |
LangLabels |
Record<string, LabelBlock> – map of language codes to label blocks |
Labels |
Record<string, LangLabels> – map of pages to language blocks |
import LabelContainer from 'labelcontainer';
import { LABELS } from './labels';
const labelInstance = LabelContainer.getInstance({ labels: LABELS });
labelInstance.setPage('PAGE_A');
labelInstance.setLanguage('en');
console.log(labelInstance.getLabel('title')); // "Page A Title"
labelInstance.setLanguage('sp');
console.log(labelInstance.getLabel('title')); // "Título de la Prueba"Planned enhancements for future versions:
- mergeLabels() — merge new label sets dynamically
- reset() — clear singleton instance for reinitialization (useful in testing or multi-app contexts)
MIT © nordic96