Inicio rápido

npm install @lingo.dev/react

Si usas Next.js, instala también @lingo.dev/react-next — agrega helpers 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 con claves basadas en el hash del contenido: exactamente lo que el CLI genera en locales/<locale>.json. La primera vez estará vacío, y no pasa nada: las cadenas sin traducir usan el texto fuente como respaldo.

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 canónica. context es obligatorio: permite que quienes traducen distingan cadenas que se ven iguales en inglés, pero cambian entre idiomas ("Save" como verbo vs. "Save" como sustantivo).

lingo extract

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

lingo push --backfill-missing

El CLI sube el archivo fuente, le pide al motor que lo traduzca a los idiomas de destino que configuraste y descarga el resultado de vuelta en locales/<locale>.json. A partir de ese momento, cada envío solo incluye lo que cambió.

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