Rychlý start

npm install @lingo.dev/react

Pokud používáte Next.js, nainstalujte také @lingo.dev/react-next — přidává nad stejným runtime pomocné funkce navázané na router.

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

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

messages je objekt indexovaný hashem obsahu — přesně to, co CLI zapisuje do locales/<locale>.json. Při prvním spuštění je prázdný, a to je v pořádku: nepřeložené řetězce se automaticky vrátí ke zdrojovému textu.

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

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

l.text(source, { context }) je základní volání. context je povinné — pomáhá překladatelům rozlišit řetězce, které v angličtině vypadají stejně, ale v jiných jazycích se překládají odlišně ("Save" jako sloveso vs. "Save" jako podstatné jméno).

lingo extract

Tím se projde váš zdrojový kód, vypočítá stabilní hash pro "Hello" + kontext a zapíše ho do souboru pro zdrojový jazyk (locales/en.jsonc ve výchozím nastavení). Po každé změně spusťte znovu — extrakce je idempotentní.

lingo push --backfill-missing

CLI nahraje zdrojový soubor, požádá engine o překlad do nakonfigurovaných cílových jazyků a stáhne výsledek zpět do locales/<locale>.json. Od této chvíle se při každém odeslání pošle jen to, co se změnilo.

Importujte JSON soubor pro jazyk, ve kterém se vaše aplikace vykresluje (nebo ho vyberte dynamicky podle uživatele), a předejte ho do LingoProvider. Volání hooku z kroku 3 zůstává stejné — l.text("Hello", ...) teď vrací přeloženou hodnotu, protože hash odpovídá tomu, co se stáhlo.