@lingo.dev/react ist eine schlanke Runtime-Bibliothek für die Übersetzung von React-Apps. Sie lädt Übersetzungen aus JSONC-Sprachdateien, löst sie über einen stabilen Content-Hash auf und rendert Strings (oder umfangreichere React-Bäume) mit Unterstützung für ICU-Plural-/Select-Formen sowie sprachabhängiger Formatierung von Zahlen, Datumsangaben, Listen und Dateigrößen.
Die Bibliothek benötigt keinen eigenen Build-Schritt — du schreibst l.text("Hello"), die CLI extrahiert es während lingo extract, und der übersetzte String wird zur Laufzeit über denselben Hash geladen. Fehlt eine Übersetzung, wird der Ausgangstext als Fallback gerendert.
Das ist die Runtime. Die ergänzenden Tools — @lingo.dev/cli zum Extrahieren und Hochladen von Übersetzungen und @lingo.dev/react-next für Next.js-Bindings — leben in eigenen Paketen.
Installieren#
npm install @lingo.dev/reactAuf einen Blick#
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>;
}Mehr braucht es für den typischen Anwendungsfall nicht: die App einmal wrappen, useLingo() in einer beliebigen Komponente aufrufen, und der Hook gibt dir das Lingo-Objekt mit .text(), .rich(), Pluralregeln, Formatierern und Metadaten zur aktuellen Sprache zurück.
