useLingo

useLingo() je způsob, jakým se komponenty dostanou k runtime. Načte nejbližší <LingoProvider> a vrátí aktivní objekt Lingo — zavolejte ho jednou v každé komponentě, uložte si referenci a používejte metody, které potřebujete.

tsx

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

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

Pokud ho zavoláte mimo provider, vyhodí chybu, takže v testech musíte render obalit — klidně i přes messages: {}, pokud v daném testu překlady neřešíte.

`l.text(source, options)` — prosté řetězce#

Běžné volání. Vrátí přeložený řetězec, nebo zdrojový text, pokud pro aktuální jazyk žádný překlad neexistuje.

tsx

l.text("Save", { context: "Form button" });
// → "Speichern" (de) / "Save" (en, fallback)

Interpolace#

Segmenty {placeholder} se dosazují z options.values.

tsx

l.text("Welcome back, {name}!", {
  values: { name: user.firstName },
  context: "Dashboard greeting",
});

Chybějící hodnoty se vykreslí doslova jako {name} — hodí se to při odhalování chyb během vývoje, ale dejte si pozor, aby testy ověřovaly skutečně vykreslený výsledek a prázdné hodnoty neprošly bez povšimnutí.

Když zdroj obsahuje syntaxi ICU#

Pokud zdrojový řetězec obsahuje značky pro plurály / select / čísla / datum, runtime se automaticky přepne — bez dalšího API. Přívětivější obálku najdete v části Plurals and select.

`l.rich(source, options)` — podstromy Reactu#

Když přeložený text obsahuje React komponenty (odkazy, tučné písmo, <Icon/>), použijte l.rich. Překladový řetězec nese zástupné tagy jako <link>...</link>; každému tagu přiřadíte renderer.

tsx

l.rich("Click <link>here</link> for {topic}", {
  tags: {
    link: (children) => <a href="/help">{children}</a>,
  },
  values: { topic: "details" },
  context: "Footer help link",
});
// → <>Click <a href="/help">here</a> for details</>

Fungují i self-closing tagy:

tsx

l.rich("Loading <spinner/>...", {
  tags: { spinner: () => <Spinner /> },
  context: "Inline loading state",
});

Tagy bez rendereru se vrátí jako surový text — takže chybějící tag je při vývoji vidět a nic se tiše neztratí.

Nevkládejte značky přímo do přeložených řetězců. l.rich existuje proto, aby překladatelé viděli neutrální zástupné symboly (<link>) místo <a href="...">, které by museli zachovat doslova a které se často rozbijí. Renderer definujte v kódu, ne v jazykovém souboru.

Metadata jazyka v `l`#

Kromě překladu objekt zpřístupňuje:

Vlastnost	Typ	Poznámky
`l.locale`	`string`	Cokoli, co jste předali do `LingoProvider`. BCP-47.
`l.direction`	`"ltr"` \| `"rtl"`	Vypočítává se pomocí `Intl.Locale.textInfo` + záložního seznamu RTL jazyků.
`l.script`	`string` \| `undefined`	Odvodí se, kdykoli je to možné (`"Latn"`, `"Cyrl"`, `"Arab"`, …).
`l.region`	`string` \| `undefined`	Odvozuje se z BCP-47 (`"US"`, `"DE"`, `"SA"`, …).

Užitečné při rozhodování o rozvržení:

tsx

const l = useLingo();
return <div dir={l.direction}>...</div>;

Metody formátování#

l také obsahuje num, currency, percent, date, time, datetime, relative, list, displayName, sort, segment, fileSize, compact, unit — úplný přehled najdete v části Formatting. Jde o tenké obálky nad nativními formátovači Intl.* navázanými na l.locale.

Mimo React#

useLingo funguje jen uvnitř komponent. Pro utility, route loadery nebo serverový kód si stejný objekt vytvořte přímo:

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

const l = createLingo("es", messages);
l.text("Hello", { context: "Email subject" });

Má stejný tvar jako Lingo, provider není potřeba. LingoProvider samo interně používá createLingo.

tsx

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

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