@diginestai/i18n — Internationalisation

@diginestai/i18n provides React context and hooks for translating all built-in UI strings in the DigiNest Maps SDK. It ships with five bundled locales and a simple extension point for custom translations.

---

Installation

pnpm add @diginestai/i18n

---

Quick Start

Wrap your application (or any sub-tree) with <I18nProvider> and pass the target locale:

import { I18nProvider } from '@diginestai/i18n';
import { SpatialProvider, SpatialMap } from '@diginestai/core';

export default function App() {
  return (
    <I18nProvider locale="fr">
      <SpatialProvider>
        <SpatialMap style="pmtiles://..." />
      </SpatialProvider>
    </I18nProvider>
  );
}

---

Supported Locales

Locale code	Language
en	English (default)
fr	French
es	Spanish
ja	Japanese
ar	Arabic (RTL)

---

<I18nProvider>

Prop	Type	Default	Description
locale	SupportedLocale	'en'	Active locale. Changes at runtime cause all consuming components to re-render.
messages	PartialMessages	—	Partial message overrides merged on top of the bundled locale.
children	ReactNode	—	App tree to translate.

Runtime locale switch

const [locale, setLocale] = useState<SupportedLocale>('en');

<I18nProvider locale={locale}>
  <button onClick={() => setLocale('ja')}>日本語</button>
  <App />
</I18nProvider>

---

useSpatialTranslation()

Returns a t function that resolves a TranslationKeys key to the current locale string.

import { useSpatialTranslation } from '@diginestai/i18n';

function SearchPlaceholder() {
  const { t } = useSpatialTranslation();
  return <input placeholder={t('searchBar.placeholder')} />;
}

Return value

Key	Type	Description
t	(key: TranslationKeys) => string	Translate a key. Falls back to en if the key is missing in the active locale.
locale	SupportedLocale	Current active locale code.

---

Adding Custom Translations

Pass a messages prop with any subset of TranslationKeys to override built-in strings:

import { I18nProvider } from '@diginestai/i18n';

const myMessages = {
  'searchBar.placeholder': 'Search for a room or desk…',
  'wayfinding.origin': 'Start here',
  'wayfinding.destination': 'End here',
};

<I18nProvider locale="en" messages={myMessages}>
  <App />
</I18nProvider>

Adding a new locale

Export a locale object that satisfies Partial<Record<TranslationKeys, string>> and pass it as messages together with the closest supported base locale:

import { I18nProvider, en } from '@diginestai/i18n';
import type { PartialMessages } from '@diginestai/i18n';

// Extend English with Australian English overrides
const enAU: PartialMessages = {
  'floorSwitcher.ground': 'Ground Floor',
};

<I18nProvider locale="en" messages={enAU}>
  <App />
</I18nProvider>

---

Direct Locale Imports

All five bundled locale objects are re-exported and can be used directly (e.g. for server-side rendering or testing):

import { en, fr, es, ja, ar } from '@diginestai/i18n';

console.log(en['searchBar.placeholder']); // 'Search…'