Le store de la locale

Tout ce qui est réactif dans Langsys repose sur un petit élément d'état : un store contenant la locale courante. Modifiez-le, et chaque traduction de l'arborescence est réaffichée. Sans rechargement, sans changement de route.

Regarder · 0:36 Le magasin de locales

Un seul store pilote tout

Vous transmettez à LangsysApp.init() un UserLocaleStore, c'est-à-dire une valeur réactive contenant une chaîne de locale. Ce sera l'équivalent réactif propre à votre framework : un signal Langsys, un writable Svelte ou un ref Vue. Modifiez-la et le SDK résout de nouveau chaque t(), <Translate> et <Phrase> selon la nouvelle 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

Chaque framework le lit nativement

Le fonctionnement de la réactivité diffère selon le framework, mais le modèle reste identique : une source de vérité unique pour la langue active, exposée à travers les idiomes que vous utilisez déjà.

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

Le changement de langue retraduit sur place

Lorsque le store change, le SDK récupère le catalogue de la nouvelle locale — une seule requête, sans rechargement de la page — et retraduit tout à son arrivée. D'ici là, la page conserve la langue qu'elle affichait, si bien que rien ne retombe sur le texte source.

Interpolation et pluriels

Regarder · 1:14 Pluralisation

Les paramètres remplacent les {placeholders}. Les phrases comportant un nombre restent simples dans votre code : Langsys génère les formes plurielles de chaque langue pendant la traduction, et le SDK affiche la variante correspondante — au moment du rendu, dans la langue active.

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"

L'astuce du côte à côte. Chaque binding délègue à un même cœur langsys-js-typescript partagé, si bien qu'un seul store peut piloter React, Vue et Svelte en même temps — c'est exactement ainsi que la démo de comparaison garde les trois parfaitement synchronisés depuis un seul sélecteur.

Essayez en direct : le playground interactif vous permet de modifier une phrase et ses paramètres, de changer de langue et de voir le vrai SDK retraduire.