Хранилище локали
Всё реактивное в Langsys зависит от одного небольшого элемента состояния: хранилища с текущей локалью. Задайте её, и каждый перевод в дереве будет перерисован. Без перезагрузки и смены маршрута.
Одно хранилище управляет всем
Вы передаёте в LangsysApp.init() объект UserLocaleStore — реактивное значение, содержащее строку локали. Это то, что в вашем фреймворке называется реактивностью: сигнал Langsys, writable в Svelte или ref в Vue. Запишите в него новое значение, и SDK заново определит каждый t(), <Translate> и <Phrase> для новой локали.
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 Каждый фреймворк читает его нативно
Реактивная «обвязка» в разных фреймворках отличается, но модель одна и та же — единый источник истины для активной локали, доступный через привычные вам идиомы.
// 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 }); Переключение переводит заново на месте
Когда хранилище меняется, SDK загружает каталог новой локали — одним запросом, без перезагрузки страницы — и по его получении заново переводит всё содержимое. До этого страница сохраняет язык, который отображала, так что возврата к исходному тексту не происходит.
Интерполяция и множественное число
Параметры подставляются в {placeholders}. Предложения с числом остаются в вашем коде простыми: Langsys генерирует формы множественного числа для каждого языка при переводе, а SDK выбирает подходящую ветку — во время отрисовки, в активной локали.
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" Секрет работы бок о бок. Все привязки делегируют работу одному общему ядру langsys-js-typescript, поэтому одно хранилище может управлять React, Vue и Svelte одновременно — именно так демо сравнения синхронно переключает все три с помощью одного переключателя.
Попробуйте вживую: интерактивная песочница позволяет изменить фразу и параметры, переключить локаль и посмотреть, как настоящий SDK заново переводит текст.