Быстрый старт

npm install @lingo.dev/react

Если вы используете Next.js, дополнительно установите @lingo.dev/react-next — он добавляет хелперы с учётом роутера поверх того же рантайма.

import { LingoProvider } from "@lingo.dev/react";
import esMessages from "./locales/es.json";

export function App() {
  return (
    <LingoProvider locale="es" messages={esMessages}>
      <Page />
    </LingoProvider>
  );
}

messages — это объект, где ключами выступают хэши содержимого, — именно в таком виде CLI записывает данные в locales/<locale>.json. При первом запуске он будет пустым, и это нормально: непереведённые строки просто подставляются в исходном виде.

import { useLingo } from "@lingo.dev/react";

function Page() {
  const l = useLingo();
  return <h1>{l.text("Hello", { context: "Hero heading" })}</h1>;
}

l.text(source, { context }) — основной способ вызова. context обязателен: он помогает переводчикам различать строки, которые в английском пишутся одинаково, но в других языках переводятся по-разному (например, "Save" как глагол и "Save" как существительное).

lingo extract

Команда сканирует исходный код, вычисляет стабильный хэш для "Hello" + контекста и записывает его в файл исходной локали (locales/en.jsonc по умолчанию). Запускайте её заново после любых изменений — извлечение идемпотентно.

lingo push --backfill-missing

CLI загружает исходный файл, просит движок перевести его на настроенные целевые локали и скачивает результат обратно в locales/<locale>.json. После этого при каждой отправке будут передаваться только изменения.

Импортируйте JSON-файл для локали, в которой рендерится ваше приложение, — или выбирайте его динамически в зависимости от пользователя — и передайте в LingoProvider. Вызов хука из шага 3 остаётся тем же: l.text("Hello", ...) теперь возвращает переведённое значение, потому что хэш совпадает с тем, что было скачано.