Introdução rápida

npm install @lingo.dev/react

Se estiver a usar Next.js, instale também @lingo.dev/react-next — adiciona utilitários integrados com o router 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, está vazio, e não há problema: as cadeias por traduzir usam o texto de origem.

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 — permite aos tradutores distinguir cadeias que se leem da mesma forma em inglês, mas têm significados diferentes noutros idiomas ("Save" como verbo vs. "Save" como nome).

lingo extract

Isto analisa o seu código-fonte, calcula um hash estável para "Hello" + o contexto e escreve-o no ficheiro do seu idioma de origem (locales/en.jsonc por predefinição). Volte a executar após qualquer alteração — a extração é idempotente.

lingo push --backfill-missing

O CLI carrega o ficheiro de origem, pede ao motor para traduzir para os idiomas de destino configurados e transfere o resultado de volta para locales/<locale>.json. A partir daqui, cada envio inclui apenas o que mudou.

Importe o ficheiro JSON do idioma em que a sua aplicação está a ser apresentada (ou selecione-o dinamicamente com base no utilizador) e passe-o a LingoProvider. A chamada do hook do passo 3 mantém-se igual — l.text("Hello", ...) devolve agora o valor traduzido porque o hash corresponde ao que foi transferido.