@lingo.dev/react

@lingo.dev/react is a small runtime library for translating React apps. It loads translations from JSONC locale files, looks them up by stable content hash, and renders strings (or rich React trees) with ICU plural / select support and locale-aware number, date, list, and file-size formatting.

The library has no build step of its own — you write l.text("Hello"), the CLI extracts it during lingo extract, and the translated string is fetched at runtime by the same hash. If a translation is missing, the source text is rendered as a fallback.

Install#

npm install @lingo.dev/react

At a glance#

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>;
}

That's the whole surface for the common case: wrap the app once, call useLingo() from any component, and the hook gives you back the Lingo object with .text(), .rich(), plurals, formatters, and metadata about the current locale.

What's in this section#