@waysnx/ui-i18n

Shared internationalization (i18n) package for WaysNX UI Kit. Provides the TranslationProvider, useTranslation hook, default English messages, and built-in locale packs.

Installation

npm install @waysnx/ui-i18n

Note: If you're using any WaysNX UI Kit package (@waysnx/ui-core, @waysnx/ui-layout, @waysnx/ui-feedback, @waysnx/ui-grid-builder), this package is automatically installed as a dependency.

Usage

Wrap your app

import { TranslationProvider, esMessages } from '@waysnx/ui-i18n';

function App() {
  return (
    <TranslationProvider locale="es" messages={esMessages}>
      <YourApp />
    </TranslationProvider>
  );
}

Use the hook

import { useTranslation } from '@waysnx/ui-i18n';

function MyComponent() {
  const { t, locale, direction } = useTranslation();
  return <p dir={direction}>{t('validation.required')}</p>;
}

Custom translations

import type { TranslationMessages } from '@waysnx/ui-i18n';

const german: TranslationMessages = {
  'validation.required': 'Dieses Feld ist erforderlich',
  'wizard.next': 'Weiter',
};

<TranslationProvider locale="de" messages={german}>

Built-in Locale Packs

| Import | Language | Direction | |--------|----------|-----------| | defaultMessages | English | LTR | | esMessages | Spanish | LTR | | frMessages | French | LTR | | arMessages | Arabic | RTL |

Features

• Zero dependencies (only peer: React)
• ~2KB bundle size
• Interpolation support: t('validation.minLength', { min: 3 })
• Auto RTL detection for Arabic, Hebrew, Persian, Urdu
• Partial overrides — only translate keys you need
• Falls back to English when no provider is present (no breaking change)

API

TranslationProvider

| Prop | Type | Default | Description | |------|------|---------|-------------| | locale | string | 'en' | Active locale code | | messages | TranslationMessages | — | Custom messages (partial override) | | direction | 'ltr' \| 'rtl' | auto-detected | Text direction |

useTranslation()

Returns: { t, locale, direction, messages }

• t(key, params?) — Get translated string with interpolation
• locale — Current locale code
• direction — 'ltr' or 'rtl'
• messages — Merged messages object