@lingo.dev/react

@lingo.dev/react je malá runtime knihovna pro překlad aplikací v Reactu. Načítá překlady ze souborů JSONC pro jednotlivé jazyky, vyhledává je podle stabilního hashe obsahu a vykresluje řetězce (nebo bohaté React stromy) s podporou ICU plurálů / selectu a s formátováním čísel, dat, seznamů a velikostí souborů podle jazyka.

Knihovna nemá vlastní build step — napíšete l.text("Hello"), CLI ho během lingo extract extrahuje a přeložený řetězec se za běhu načte podle stejného hashe. Pokud překlad chybí, jako fallback se vykreslí zdrojový text.

Instalace#

npm install @lingo.dev/react

Na první pohled#

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

To je celé API pro běžné použití: jednou obalíte aplikaci, z libovolné komponenty zavoláte useLingo() a hook vám vrátí objekt Lingo s .text(), .rich(), plurály, formátovači a metadaty o aktuálním jazyce.

Co najdete v této sekci#