← Concepten

De locale-store

Alles wat reactief is in Langsys hangt aan één klein stukje state: een store met de huidige locale. Stel die in, en elke vertaling in de boomstructuur wordt opnieuw gerenderd. Geen herlading, geen routewijziging.

Eén store stuurt alles aan

Je geeft LangsysApp.init() een UserLocaleStore mee: een reactieve waarde met een locale-string. Het is wat jouw framework ook reactief noemt: een Langsys-signal, een Svelte-writable of een Vue-ref. Schrijf ernaar en de SDK bepaalt elke t(), <Translate> en <Phrase> opnieuw voor de nieuwe 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

Elk framework leest het native

De reactieve basis verschilt per framework, maar het model is identiek — één enkele bron van waarheid voor de actieve locale, aangeboden via de idiomen die je al gebruikt.

// 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 });

Wisselen vertaalt direct ter plekke opnieuw

Wanneer de store verandert, haalt de SDK de catalogus van de nieuwe locale op — één verzoek, zonder pagina te herladen — en vertaalt alles opnieuw zodra die binnen is. Tot die tijd behoudt de pagina de taal die ze toonde, zodat niets terugvalt op de brontekst.

Interpolatie en meervouden

Params vullen de {placeholders} in. Zinnen met een aantal blijven in je code gewoon vlak: Langsys genereert tijdens het vertalen de meervoudsvormen van elke taal, en de SDK rendert de bijpassende variant — op het moment van renderen, in de actieve taalregio.

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"

Probeer het live: in de interactieve playground kun je een zin en parameters bewerken, de taal wisselen en de echte SDK opnieuw zien vertalen.