Dokumentacja hooka useDictionary

Hook useDictionary przekształca zaimportowany lub wbudowany obiekt słownika i zwraca jego zawartość rozwiązaną dla języka bieżącego żądania w aplikacjach Remix 3.

W przeciwieństwie do useIntlayer, który pobiera słowniki na podstawie ich klucza tekstowego z globalnego rejestru słowników, useDictionary przyjmuje bezpośrednio obiekt słownika.

Użycie

import { useDictionary } from "remix-intlayer";
import homeContent from "./home.content";

export const HomeView = () => {
  const content = useDictionary(homeContent);

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

Możesz także przekazywać wbudowane słowniki zdefiniowane za pomocą t():

import { useDictionary } from "remix-intlayer";
import { t } from "intlayer";

export const FooterView = () => {
  const content = useDictionary({
    key: "footer",
    content: {
      copyright: t({
        pl: "Wszelkie prawa zastrzeżone.",
        en: "All rights reserved.",
        fr: "Tous droits réservés.",
        es: "Todos los derechos reservados.",
      }),
    },
  });

  return `<footer>${content.copyright}</footer>`;
};

Parametry

useDictionary(dictionary, localeOrSelector?)

1. dictionary: Obiekt słownika lub kwalifikowana grupa słowników.
2. localeOrSelector (opcjonalnie): Określony język lub obiekt selektora ({ item }, { variant }, opcjonalnie z locale). Ma pierwszeństwo przed językiem żądania, jeśli zostanie podany.

Opis

Hook wykonuje następujące zadania:

1. Wykrywanie języka: Odczytuje aktywny język żądania z magazynu AsyncLocalStorage utworzonego przez middleware intlayer().
2. Rozwiązywanie zawartości: Ewaluuje tłumaczenia (t()), wyliczenia, warunki i zagnieżdżone struktury zgodnie z ustalonym językiem.
3. Przetwarzanie selektorów: Stosuje wszelkie selektory elementów lub wariantów określone w argumentach.

Powiązana dokumentacja

• Middleware intlayer
• Hook useIntlayer
• Hook useLocale