← Conceitos

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.

Assistir · 0:36 O armazenamento de localidade

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

Assistir · 1:14 Pluralização

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.

Pesquisar na documentação e na Central de Aprendizado