useDictionary Hook Documentation

The useDictionary hook resolves an imported or inline dictionary object and returns its content for the current locale in Astro applications.

Unlike useIntlayer, which retrieves dictionaries by key from the global dictionary registry, useDictionary works directly with a dictionary object.

Usage

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

const content = useDictionary(homeContent);
---

<main>
  <h1>{content.title}</h1>
  <p>{content.description}</p>
</main>

You can also pass inline dictionaries defined with t():

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

const footer = useDictionary({
  key: "footer",
  content: {
    copyright: t({
      en: "All rights reserved.",
      fr: "Tous droits réservés.",
      es: "Todos los derechos reservados.",
    }),
  },
});
---

<footer>
  <p>{footer.copyright}</p>
</footer>

Parameters

useDictionary(dictionary, localeOrSelector?)

1. dictionary: A dictionary object or qualified dictionary group.
2. localeOrSelector (optional): A specific locale or selector object ({ item }, { variant }, optionally with locale).

Description

The hook performs the following tasks:

1. Locale Detection: On the server, it obtains the locale from Astro.locals.intlayer. In the browser, it uses the client-side store locale.
2. Content Processing: Resolves translations (t()), enumerations, conditions, and nested structures according to the resolved locale.
3. Selectors: Applies any item or variant selectors provided in the arguments.

Related Documentation