← Концепции

Хранилище локали

Всё реактивное в Langsys зависит от одного небольшого элемента состояния: хранилища с текущей локалью. Задайте её, и каждый перевод в дереве будет перерисован. Без перезагрузки и смены маршрута.

Смотреть · 0:36 Хранилище локалей

Одно хранилище управляет всем

Вы передаёте в 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 загружает каталог новой локали — одним запросом, без перезагрузки страницы — и по его получении заново переводит всё содержимое. До этого страница сохраняет язык, который отображала, так что возврата к исходному тексту не происходит.

Интерполяция и множественное число

Смотреть · 1:14 Плюрализация

Параметры подставляются в {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 заново переводит текст.

Поиск по документации и Учебному центру