@lingo.dev/react

@lingo.dev/react — небольшая runtime-библиотека для перевода React-приложений. Она загружает переводы из JSONC-файлов локалей, находит их по стабильному хешу содержимого и рендерит строки (или богатые деревья React) с поддержкой ICU plural / select и форматированием чисел, дат, списков и размеров файлов с учетом локали.

У библиотеки нет собственного этапа сборки: вы пишете l.text("Hello"), CLI извлекает это во время lingo extract, а переведенная строка подгружается во время выполнения по тому же хешу. Если перевода нет, в качестве запасного варианта рендерится исходный текст.

Это runtime. Сопутствующие инструменты — @lingo.dev/cli для извлечения и отправки переводов и @lingo.dev/react-next для интеграции с Next.js — доступны в отдельных пакетах.

Установка#

bash

npm install @lingo.dev/react

С первого взгляда#

tsx

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

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

function Greeting({ name }: { name: string }) {
  const l = useLingo();
  return <p>{l.text("Hello, {name}!", { values: { name }, context: "Hero greeting" })}</p>;
}

Это и есть весь API для типичного сценария: один раз оберните приложение, вызывайте useLingo() из любого компонента — и хук вернет объект Lingo с .text(), .rich(), множественными формами, форматтерами и метаданными о текущей локали.

Что в этом разделе#

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

Установите, напишите свой первый перевод, запустите `lingo extract` и посмотрите результат.

LingoProvider

Провайдер контекста. Как работает слияние, когда нужна вложенность и как должны выглядеть сообщения.

useLingo

Хук. `text()` для строк, `rich()` для деревьев React и рекомендации, когда что использовать.

Множественные формы и select

Формы ICU plural и select — удобный API, который компилируется в MessageFormat.

Форматирование

Числа, валюта, проценты, даты, относительное время, списки и размеры файлов — всё через встроенный Intl.

Эта страница была полезной?