i18n
Overview
Shared internationalization constants, utilities, and components.
@workspace/i18n is the shared package for internationalization across the monorepo. It provides language constants, validation utilities, browser-based language detection, and ready-to-use React components — all framework-agnostic (no i18next dependency).
Quick Start
import { Lang, parseLanguage, detectPreferredLanguage } from '@workspace/i18n';
import { LanguageSelect } from '@workspace/i18n/components';
import { getLanguageSelectorOptions } from '@workspace/i18n/validation';
// Define your app's supported languages
const SUPPORTED = ['fr', 'en'] as const;
// Parse user input safely
const lang = parseLanguage(userInput, Lang.FR, SUPPORTED);
// Detect browser preference
const preferred = detectPreferredLanguage(SUPPORTED, Lang.FR);
// Build options for a language dropdown
const options = getLanguageSelectorOptions(SUPPORTED);Sub-path Exports
The package exposes granular sub-path exports:
| Import Path | Description |
|---|---|
@workspace/i18n | All exports (constants, types, validation, detection, components) |
@workspace/i18n/constants | Language codes, names, OG locales, storage key |
@workspace/i18n/types | TypeScript types for language selectors and banners |
@workspace/i18n/validation | Language parsing, validation, selector options |
@workspace/i18n/detection | Browser language detection and localStorage persistence |
@workspace/i18n/components | LanguageSelect and LanguageBanner React components |
@workspace/i18n/styles.css | Component styles |
Supported Languages
The package defines 10 languages used across the monorepo. Individual apps may use subsets.
| Code | Language |
|---|---|
ca | Català |
de | Deutsch |
en | English |
es | Español |
fr | Français |
nl | Nederlands |
pl | Polski |
pt | Português |
sv | Svenska |
el | Ελληνικά |
Package Structure
constants.ts
detection.ts
index.ts
styles.css
types.ts
validation.ts
vite.ts
world-languages.ts
index.ts
language-banner.tsx
language-select.tsx
localized.tsx