What is the core idea behind intlayer-react?

It uses component-level content declarations paired with the useIntlayer hook to fetch translations, avoiding a single global translation file.

How do I declare translations for multiple locales?

Define translations in a content file using t({ en: '...', fr: '...', es: '...' }) and ensure the keys match what you pass to useIntlayer.

Do I need a separate translation setup for every component?

Yes, translations live next to the component in a content.ts file, enabling localized rendering without a central dictionary.

intlayer-react

npx machina-cli add skill aymericzip/intlayer-skills/intlayer-react --openclaw

Files (1)

SKILL.md

3.5 KB

Intlayer React 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 React components that use them.

Workflow

To create a translated component, you need two files:

Declaration: A content file (e.g., myComponent.content.ts) defining the dictionary.
Implementation: A React component (e.g., MyComponent.tsx) using the useIntlayer hook.

1. Declare Content

Create a content file using t() for translations. File: src/components/MyComponent/myComponent.content.ts

import { t, type Dictionary } from "intlayer";

const content = {
  // The 'key' must be unique and matches what you pass to useIntlayer()
  key: "my-component",
  content: {
    text: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
      // ... All other locales set in intlayer config file
    }),
  },
} satisfies Dictionary;

export default content;

Intlayer React Usage

Setup

useIntlayer Hook

import { useIntlayer } from "react-intlayer";
const MyComponent = () => {
  const content = useIntlayer("my-dictionary-key");
  return (
    <div>
      <h1>
        {/* Return react node */}
        {content.text}
      </h1>
      {/* Return string (.value) */}
      <img src={content.text.value} alt={content.text.value} />
    </div>
  );
};

References

Website
Doc

Environments

Packages

Source

git clone https://github.com/aymericzip/intlayer-skills/blob/main/skills/intlayer-react/SKILL.mdView on GitHub

Overview

Intlayer-react enables component-level internationalization by declaring translations next to React components. It uses a content file with t() translations and the useIntlayer hook to fetch localized strings at render time. This approach avoids monolithic translation files and keeps translations close to components.

How This Skill Works

You declare a per-component content file that exports a dictionary with a unique key and translations via t(). In your component, call useIntlayer with that key to fetch the translations and render content.text or content.text.value. This pattern keeps localization tied to the component lifecycle and simplifies locale switching.

When to Use It

When you need to set up React i18n for a component
When you are creating a new translated component
When you want to fetch translations via the useIntlayer hook
When you want content declarations to reside next to the component (component-level content declaration)
When configuring providers and locale settings for Intlayer in your app

Quick Start

Step 1: Create a content file (e.g., src/components/MyComponent/myComponent.content.ts) that exports a dictionary with a unique key and translations using t().
Step 2: Implement the React component (e.g., MyComponent.tsx) and call const content = useIntlayer('my-component'); render content.text.
Step 3: Wrap your app with the IntlayerProvider and configure locales so the selected locale renders the correct translations.

Best Practices

Place a .content.ts file adjacent to each component that needs translations
Use a unique dictionary key that matches what you pass to useIntlayer()
Define translations with t({ en: '', fr: '', es: '' }) for all required locales
Access translations through content.text (or content.text.value) in your JSX
Test components across multiple locales during development to ensure coverage

Example Use Cases

Declare a dictionary with key 'my-component' and content.text = t({ en: 'Welcome', fr: 'Bienvenue', es: 'Hola' }) in myComponent.content.ts, then use useIntlayer('my-component') in MyComponent.tsx.
Translate a button label by creating a content file for the button with a unique key and rendering content.text inside the Button component via useIntlayer.
Load localized alt text for images by returning content.text.value and binding it to the img alt attribute.
Create a header that switches between 'Welcome' in different locales by rendering content.text in a header element retrieved with useIntlayer.
Configure IntlayerProvider at the app level and wire locale switching so components can render the correct translations without a global file.

Frequently Asked Questions

Add this skill to your agents