Primeiros passos

npm install @lingo.dev/react

Se você usa Next.js, instale também @lingo.dev/react-next — ele adiciona helpers integrados ao roteador sobre o mesmo runtime.

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

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

messages é um objeto indexado por hash de conteúdo — exatamente o que o CLI gera em locales/<locale>.json. Na primeira execução, ele vem vazio, e tudo bem: strings ainda não traduzidas usam o texto de origem como fallback.

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

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

l.text(source, { context }) é a chamada canônica. context é obrigatório — ele permite que tradutores desambiguem strings que são iguais em inglês, mas mudam entre idiomas ("Save" como verbo vs. "Save" como substantivo).

lingo extract

Isso analisa seu código-fonte, calcula um hash estável para "Hello" + o contexto e o grava no arquivo do idioma de origem (locales/en.jsonc por padrão). Execute novamente após qualquer alteração — a extração é idempotente.

lingo push --backfill-missing

O CLI faz upload do arquivo de origem, pede ao engine para traduzir para os idiomas de destino configurados e baixa o resultado de volta em locales/<locale>.json. A partir daí, cada envio manda apenas o que mudou.

Importe o arquivo JSON do idioma que seu app está renderizando (ou selecione-o dinamicamente com base no usuário) e passe-o para LingoProvider. A chamada do hook da etapa 3 continua igual — l.text("Hello", ...) agora retorna o valor traduzido porque o hash corresponde ao que foi baixado.