@lingo.dev/react est une petite bibliothèque d’exécution pour traduire des applications React. Elle charge les traductions depuis des fichiers de langue JSONC, les retrouve à partir d’un hash de contenu stable, puis affiche des chaînes (ou des arborescences React enrichies) avec prise en charge des pluriels / sélections ICU, ainsi que le formatage des nombres, dates, listes et tailles de fichier adapté à la langue.
La bibliothèque n’a pas sa propre étape de build : vous écrivez l.text("Hello"), le CLI l’extrait pendant lingo extract, puis la chaîne traduite est récupérée à l’exécution via ce même hash. Si une traduction est manquante, le texte source est affiché par défaut.
Ici, on parle du runtime. Les outils complémentaires — @lingo.dev/cli pour l’extraction et l’envoi des traductions, et @lingo.dev/react-next pour les intégrations Next.js — vivent dans leurs propres packages.
Installer#
npm install @lingo.dev/reactEn bref#
import { LingoProvider, useLingo } from "@lingo.dev/react";
import esMessages from "./locales/es.json";
export function App() {
return (
<LingoProvider locale="es" messages={esMessages}>
<Greeting name="Ada" />
</LingoProvider>
);
}
function Greeting({ name }: { name: string }) {
const l = useLingo();
return <p>{l.text("Hello, {name}!", { values: { name }, context: "Hero greeting" })}</p>;
}C’est tout ce qu’il faut pour le cas d’usage le plus courant : enveloppez l’application une seule fois, appelez useLingo() depuis n’importe quel composant, et le hook vous renvoie l’objet Lingo avec .text(), .rich(), les pluriels, les formateurs et les métadonnées de la langue actuelle.
