← Concepts

The locale store

Everything reactive in Langsys hangs off one small piece of state: a store holding the current locale. Set it, and every translation in the tree re-renders. No reload, no route change.

One store drives everything

You hand LangsysApp.init() a UserLocaleStore — a reactive value holding a locale string. It's whatever your framework calls reactive: a Langsys signal, a Svelte writable, or a Vue ref. Write to it and the SDK re-resolves every t(), <Translate>, and <Phrase> against the new locale.

import { LangsysApp, createLocaleStore } from 'langsys-js-react';

const locale = createLocaleStore('en-US');   // one reactive store

await LangsysApp.init({
  projectid,
  key,                    // read-only in the browser
  UserLocaleStore: locale,
});

// Later — anywhere in the app:
locale.set('es-ES');      // every t(), <Translate>, <Phrase> re-renders

Each framework reads it natively

The reactive plumbing differs per framework, but the model is identical — a single source of truth for the active locale, surfaced through the idioms you already use.

// React    — a hook returns the current t, re-rendering on change
const t = useT();

// Vue      — a composable ref, auto-unwrapped in templates
const t = useT();

// Svelte   — a store, auto-subscribed with $
$t('Hello, {name}!', 'Greetings', { name });

Switching re-translates in place

When the store changes, the SDK fetches the new locale's catalog — one request, no page reload — and re-translates everything when it arrives. Until then the page keeps the language it was showing, so nothing falls back to the source text.

Interpolation & plurals

Params fill {placeholders}. Sentences with a count stay flat in your code: Langsys generates each language’s plural forms during translation, and the SDK renders the branch that matches — at render time, in the active locale.

t('You have {count} items', 'Cart', { count });

// You write that one flat sentence. Langsys generates each locale's plural
// forms during translation, and the SDK renders the branch your count matches:
// en → "1 item" / "3 items"   ·   es → "1 artículo" / "3 artículos"

Try it live: the interactive playground lets you edit a phrase and params, flip the locale, and watch the real SDK re-translate.