useDictionary Hook Documentation

The useDictionary hook transforms an imported or inline dictionary object and returns its content resolved for the current request's locale in Remix 3 applications.

Unlike useIntlayer, which resolves dictionaries by their string key from the global dictionary registry, useDictionary accepts a dictionary object directly.

Usage

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

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

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

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

  return `<footer>${content.copyright}</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). Takes precedence over the request locale if supplied.

Description

The hook performs the following tasks:

1. Locale Detection: Reads the active request locale from the AsyncLocalStorage store created by the intlayer() middleware.
2. Content Resolution: Evaluates translations (t()), enumerations, conditions, and nested structures according to the resolved locale.
3. Selector Processing: Applies any item or variant selectors specified in the arguments.

Related Documentation