Dokumentacja hooka useIntlayer

Hook useIntlayer umożliwia pobieranie zlokalizowanej zawartości ze słownika Intlayer według klucza w aplikacjach Remix 3.

Automatycznie odczytuje aktywny język z bieżącego kontekstu żądania (za pośrednictwem AsyncLocalStorage), dzięki czemu nie trzeba przekazywać języka przez procedury obsługi tras, szablony widoków ani komponenty.

Użycie

W procedurach obsługi tras

import { createRouter } from "remix/router";
import { intlayer, useIntlayer } from "remix-intlayer";

const router = createRouter({
  middleware: [intlayer()],
});

router.get("/api/welcome", () => {
  const content = useIntlayer("home");

  return Response.json({
    title: content.title,
    subtitle: content.subtitle,
  });
});

W szablonach widoków i komponentach

import { useIntlayer } from "remix-intlayer";

export const HomeView = () => {
  const content = useIntlayer("home");

  return `
    <main>
      <h1>${content.title}</h1>
      <p>${content.subtitle}</p>
    </main>
  `;
};

Parametry

useIntlayer(key, localeOrSelector?)

1. key: Unikalny klucz słownika (zgodnie z definicją w plikach deklaracji .content.ts).
2. localeOrSelector (opcjonalnie): Określony język lub obiekt selektora ({ item }, { variant }, opcjonalnie z locale). Jeśli zostanie podany, nadpisuje język wykryty z kontekstu żądania.

Opis

Hook wykonuje następujące zadania:

1. Wykrywanie języka z kontekstu: Wykrywa bieżący język z zakresu AsyncLocalStorage powiązanego z żądaniem, ustanowionego przez middleware intlayer().
2. Pobieranie słownika: Pobiera wstępnie skompilowany słownik odpowiadający podanemu kluczowi.
3. Przetwarzanie tłumaczeń: Rozwiązuje tłumaczenia, wyliczenia, markdown i zawartość warunkową dla ustalonego języka.
4. Obsługa fallbacku: W przypadku wywołania poza aktywnym kontekstem żądania HTTP (np. zadania w tle lub testy jednostkowe bez middleware) bezpiecznie powraca do skonfigurowanego defaultLocale.

Powiązana dokumentacja

• Middleware intlayer
• Hook useDictionary
• Hook useLocale