useIntlayer Hook Documentation

The useIntlayer hook allows you to retrieve localized content from an Intlayer dictionary by key in Remix 3 applications.

It automatically reads the active locale from the current request context (via AsyncLocalStorage), so you don't need to pass the locale through route handlers, view templates, or components.

Usage

In Route Handlers

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,
  });
});

In View Templates / Components

import { useIntlayer } from "remix-intlayer";

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

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

Parameters

useIntlayer(key, localeOrSelector?)

1. key: The unique key of the dictionary (as defined in your .content.ts declaration files).
2. localeOrSelector (optional): A specific locale or selector object ({ item }, { variant }, optionally with locale). When provided, it overrides the locale detected from the request context.

Description

The hook performs the following tasks:

1. Context Locale Retrieval: Detects the current locale from the request-bound AsyncLocalStorage scope established by the intlayer() middleware.
2. Dictionary Retrieval: Retrieves the pre-compiled dictionary corresponding to the provided key.
3. Translation Processing: Resolves translations, enumerations, markdown, and conditional content for the resolved locale.
4. Fallback Handling: If called outside of an active HTTP request context (e.g. background tasks or unit tests without middleware), it gracefully falls back to the configured defaultLocale.

Related Documentation