O store de idioma
Tudo o que é reativo no Langsys depende de uma pequena peça de estado: um store que guarda a localidade atual. Defina-a e cada tradução na árvore é renderizada novamente. Sem recarregar, sem mudar de rota.
Um único store controla tudo
Você passa para LangsysApp.init() um UserLocaleStore — um valor reativo que guarda uma string de idioma. É o que o seu framework chamar de reativo: um signal da Langsys, um writable do Svelte ou um ref do Vue. Atribua um valor a ele e o SDK resolve de novo cada t(), <Translate> e <Phrase> de acordo com o novo idioma.
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 Cada framework o lê nativamente
A infraestrutura reativa muda de framework para framework, mas o modelo é idêntico — uma única fonte de verdade para o idioma ativo, exposta pelos recursos que você já usa.
// 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 }); Trocar de idioma retraduz no mesmo lugar
Quando o store muda, o SDK busca o catálogo do novo locale — uma única requisição, sem recarregar a página — e traduz tudo de novo quando ele chega. Até lá, a página mantém o idioma que estava exibindo, então nada volta para o texto de origem.
Interpolação e plurais
Os parâmetros preenchem os {placeholders}. Frases com contagem permanecem simples no seu código: a Langsys gera as formas plurais de cada idioma durante a tradução, e o SDK renderiza a variação correspondente — no momento da renderização, no idioma ativo.
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" O truque do lado a lado. Todas as integrações delegam a um único núcleo compartilhado, o langsys-js-typescript, então um único store pode controlar React, Vue e Svelte ao mesmo tempo — é exatamente assim que a demo de comparação mantém os três em sincronia a partir de um único seletor.
Experimente ao vivo: o playground interativo permite editar uma frase e seus parâmetros, trocar o idioma e ver o SDK de verdade traduzir de novo.