← Concetti

Lo store della lingua

In Langsys tutto ciò che è reattivo dipende da un unico piccolo elemento di stato: uno store che contiene la lingua corrente. Impostala e ogni traduzione nell'albero viene renderizzata di nuovo. Nessun ricaricamento, nessun cambio di route.

Guarda · 0:36 Lo store dei locale

Uno store gestisce tutto

Passi a LangsysApp.init() un UserLocaleStore: un valore reattivo che contiene una stringa di lingua. È quello che il tuo framework chiama reattivo: un signal di Langsys, un writable di Svelte o un ref di Vue. Scrivi al suo interno e l'SDK risolve di nuovo ogni t(), <Translate> e <Phrase> rispetto alla nuova lingua.

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

Ogni framework lo legge in modo nativo

La gestione della reattività cambia da framework a framework, ma il modello è identico: un'unica fonte di verità per la lingua attiva, esposta attraverso i costrutti che già usi.

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

Il cambio di lingua ritraduce sul posto

Quando lo store cambia, l'SDK scarica il catalogo della nuova lingua — una sola richiesta, senza ricaricare la pagina — e ritraduce tutto non appena arriva. Fino a quel momento la pagina mantiene la lingua che stava mostrando, quindi nulla ricade sul testo di origine.

Interpolazione e plurali

Guarda · 1:14 Pluralizzazione

I parametri sostituiscono i {placeholders}. Le frasi con un conteggio restano semplici nel tuo codice: Langsys genera le forme plurali di ogni lingua durante la traduzione e l'SDK mostra il ramo corrispondente, al momento del rendering, nella lingua attiva.

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"

Il trucco del confronto affiancato. Ogni binding delega a un unico core condiviso langsys-js-typescript, quindi un solo store può gestire React, Vue e Svelte contemporaneamente — ed è proprio così che la demo di confronto mantiene tutti e tre perfettamente sincronizzati con un solo selettore.

Provalo dal vivo: il playground interattivo ti permette di modificare una frase e i parametri, cambiare la lingua e vedere l'SDK reale rieseguire la traduzione.

Cerca nella documentazione e nel Learning Center