aymericzip/intlayer-skills/intlayer-remix

Intlayer Remix Usage

Core Philosophy

Intlayer promotes Component-Level Content Declaration. Instead of a massive global translation file, content is declared in *.content.ts files adjacent to the views that use them.

Declare Content

File: src/views/home.content.ts

import { t, type Dictionary } from "intlayer";
const content = {
  key: "home",
  content: {
    title: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
    }),
  },
} satisfies Dictionary;
export default content;

Setup

• Remix 3

Register the intlayer() router middleware in createRouter(), before render(). It strips the locale prefix before route matching, so routes are declared once without a :locale segment.

Hooks

useIntlayer, useDictionary and useLocale read the request locale with no argument, anywhere downstream of the middleware (route handlers and remix/ui views).

import { useIntlayer, useLocale } from "remix-intlayer";
export const HomePage = () => () => {
  const { locale, availableLocales } = useLocale();
  const home = useIntlayer("home");
  return <h1>{home.title}</h1>;
};

- useIntlayer("home", "fr") overrides the request locale for one call.

- Remix JSX is not React: class is written as-is, and re-renders are triggered with handle.update().

- Outside of a request, the hooks fall back to the default locale.

Compiler

The Intlayer Compiler can extract all your content keys from your components, using one CLI command (npx intlayer extract) or automatically at app build.

References

• Website
• Doc

Environments

• Remix 3

Concepts

• Variants
• Collections
• Compiler
• Formatters (number, currency, date, …)

Packages

• Intlayer Exports
• Remix Intlayer Exports
• remix-intlayer Intlayer
• remix-intlayer intlayerMiddleware
• remix-intlayer useDictionary
• remix-intlayer useIntlayer
• remix-intlayer useLocale