Localisation

English, Romanian, Russian and German ship built in. LOCALES lists them with their display names, which is enough to build your own language picker. useTranslation reads the active language from inside the provider.

import { LOCALES, useTranslation } from "@thenoughtyfox/noughty-tours-web-sdk";

function LanguagePicker() {
  const { locale, setLocale } = useTranslation();

  return (
    <select value={locale} onChange={e => setLocale(e.target.value)}>
      {LOCALES.map(l => (
        <option key={l.code} value={l.code}>{l.name}</option>
      ))}
    </select>
  );
}

Overriding strings

Override individual strings with messages; anything you leave out falls back to the built-in text.

<I18nProvider
  defaultLocale="en"
  messages={{ en: { "tour.startTour": "View property" } }}
>

Controlling the language yourself

Pass locale and onLocaleChange to I18nProvider and the built-in switcher reports the user's choice instead of applying it directly.

The SDK never writes to storage. To remember a choice across visits, persist it from onLocaleChange and feed it back through locale:

const [locale, setLocale] = useState(() => localStorage.getItem("locale") ?? "en");

<I18nProvider
  locale={locale}
  onLocaleChange={next => {
    setLocale(next);
    localStorage.setItem("locale", next);
  }}
>

Exports

Export	Type	Description
LOCALES	array	Built-in languages, each with a code and a display name.
DEFAULT_LOCALE	Locale	The fallback language, "en".
TRANSLATIONS	Record<Locale, Dict>	The full built-in string set, keyed by locale.
useTranslation()	hook	Returns locale, setLocale and t.
useI18n()	hook	The same context value, under its other name.