useDictionary Hook Dokumentation

Der useDictionary-Hook transformiert ein importiertes oder inline definiertes Wörterbuchobjekt und gibt dessen Inhalt für die Locale der aktuellen Anfrage in Remix 3-Anwendungen zurück.

Im Gegensatz zu useIntlayer, das Wörterbücher anhand ihres Zeichenfolgenschlüssels aus der globalen Wörterbuchregistrierung auflöst, akzeptiert useDictionary direkt ein Wörterbuchobjekt.

Verwendung

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

Sie können auch Inline-Wörterbücher übergeben, die mit t() definiert sind:

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

export const FooterView = () => {
  const content = useDictionary({
    key: "footer",
    content: {
      copyright: t({
        de: "Alle Rechte vorbehalten.",
        en: "All rights reserved.",
        fr: "Tous droits réservés.",
      }),
    },
  });

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

Parameter

useDictionary(dictionary, localeOrSelector?)

1. dictionary: Ein Wörterbuchobjekt oder eine qualifizierte Wörterbuchgruppe.
2. localeOrSelector (optional): Eine spezifische Locale oder ein Selektorobjekt ({ item }, { variant }, optional mit locale).

Beschreibung

Der Hook führt folgende Aufgaben aus:

1. Locale-Erkennung: Liest die aktive Request-Locale aus dem vom intlayer()-Middleware erstellten AsyncLocalStorage-Speicher.
2. Inhaltsauflösung: Wertet Übersetzungen (t()), Aufzählungen, Bedingungen und verschachtelte Strukturen gemäß der aufgelösten Locale aus.
3. Selektorverarbeitung: Wendet alle in den Argumenten angegebenen Element- oder Variantenselektoren an.

Zugehörige Dokumentation

• intlayer Middleware
• useIntlayer Hook
• useLocale Hook