Function createLocalizeContext

Creates a React context + hook pair bound to a specific LocaleManager instance. Returns a [Provider, useHook] tuple — rename to whatever fits your domain.

Setup:

import { LocaleManager } from '@logosdx/localize';
import { createLocalizeContext } from '@logosdx/react';

const locales = new LocaleManager({
    current: 'en',
    fallback: 'en',
    locales: {
        en: { code: 'en', text: 'English', labels: {
            home: { greeting: 'Hello, {name}!' },
            nav: { logout: 'Log out' },
        }},
        es: { code: 'es', text: 'Español', labels: {
            home: { greeting: '¡Hola, {name}!' },
            nav: { logout: 'Cerrar sesión' },
        }},
    },
});

export const [AppLocale, useAppLocale] = createLocalizeContext(locales);

Wrap your app:

<AppLocale>
    <App />
</AppLocale>

Use in components — switching locale triggers a re-render automatically:

function Greeting() {

    const { t, locale, changeTo, locales } = useAppLocale();

    return (
        <div>
            <h1>{t('home.greeting', { name: 'World' })}</h1>
            <p>Current: {locale}</p>

            {locales.map(({ code, text }) => (
                <button key={code} onClick={() => changeTo(code)}>
                    {text}
                </button>
            ))}
        </div>
    );
}