Guía rápida

npm install @lingo.dev/react

Si usas Next.js, instala también @lingo.dev/react-next: añade utilidades compatibles con el router sobre el mismo 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 es un objeto indexado por hash de contenido, exactamente lo que genera el CLI en locales/<locale>.json. En la primera ejecución estará vacío, y no pasa nada: las cadenas sin traducir mostrarán el texto original.

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

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

l.text(source, { context }) es la llamada de referencia. context es obligatorio: permite a los traductores distinguir cadenas que se escriben igual en inglés, pero cambian de significado según el idioma ("Save" como verbo frente a "Save" como sustantivo).

lingo extract

Esto analiza tu código fuente, calcula un hash estable para "Hello" + el contexto y lo escribe en el archivo del idioma de origen (locales/en.jsonc por defecto). Vuelve a ejecutarlo después de cualquier cambio: la extracción es idempotente.

lingo push --backfill-missing

El CLI sube el archivo fuente, pide al motor que lo traduzca a los idiomas de destino configurados y descarga el resultado de nuevo en locales/<locale>.json. A partir de ahí, cada envío solo incluye lo que haya cambiado.

Importa el archivo JSON del idioma en el que se muestra tu aplicación (o selecciónalo dinámicamente según el usuario) y pásalo a LingoProvider. La llamada al hook del paso 3 sigue siendo la misma: l.text("Hello", ...) ahora devuelve el valor traducido porque el hash coincide con lo que se ha descargado.