React usage

@18ways/react gives you the runtime primitives. The main job is to scope them cleanly.

Root mode vs scope mode

At the root, Ways owns the API key, locale, accepted locales, and shared translation store.

Nested Ways scopes only need context:

<Ways
  apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
  locale="es-ES"
  baseLocale="en-GB"
  context="checkout"
>
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

Loading state

If you want to reflect translation work in the UI, use useTranslationLoading().

import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading =
    useTranslationLoading();
 
  return (
    <span>
      {isTranslationLoading
        ? 'Loading translations...'
        : 'Ready'}
    </span>
  );
}

Locale hooks

The root runtime exposes two low-level hooks:

import {
  useCurrentLocale,
  useSetCurrentLocale,
} from '@18ways/react';

Use them when you want to build your own locale controls instead of LanguageSwitcher.

LanguageSwitcher

The built-in switcher is controlled and composable.

<LanguageSwitcher
  currentLocale={locale}
  onLocaleChange={setLocale}
  direction="down"
/>

It reads the accepted locale list from the root runtime and handles loading states while the next locale resolves.

Component composition

Keep the sentence together and let <T> preserve the UI shape.

<T>
  <a href="/pricing">Click here</a> to see more
</T>

Message formatter escape hatches

The default formatter is waysParser. Only switch away from it if you have a concrete reason.

• messageFormatter="none" leaves strings alone.
• a custom formatter function lets you own interpolation fully.

That should be rare.