Démarrage rapide

npm install @lingo.dev/react

Si vous utilisez Next.js, installez aussi @lingo.dev/react-next — il ajoute des helpers compatibles avec le routeur, basés sur le même 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 est un objet indexé par hachage de contenu — exactement le format généré par le CLI dans locales/<locale>.json. Lors de la première exécution, il est vide, et c’est tout à fait normal : les chaînes non traduites affichent simplement leur texte source.

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

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

l.text(source, { context }) est l’appel de référence. context est indispensable — il permet aux traducteurs de lever les ambiguïtés entre des chaînes identiques en anglais, mais qui se traduisent différemment selon la langue ("Save" verbe vs. "Save" nom).

lingo extract

Cette étape analyse votre code source, calcule un hachage stable pour "Hello" + le contexte, puis l’écrit dans votre fichier de langue source (locales/en.jsonc par défaut). Relancez-la après chaque modification — l’extraction est idempotente.

lingo push --backfill-missing

Le CLI téléverse le fichier source, demande au moteur de le traduire dans les langues cibles configurées, puis rapatrie le résultat dans locales/<locale>.json. Ensuite, chaque envoi ne contient plus que les changements.

Importez le fichier JSON de la langue dans laquelle votre application s’affiche (ou sélectionnez-le dynamiquement selon l’utilisateur), puis passez-le à LingoProvider. L’appel au hook de l’étape 3 ne change pas — l.text("Hello", ...) renvoie désormais la valeur traduite, car le hachage correspond à ce qui a été téléchargé.