What files do I need to add to use intlayer-preact?

Add a content file (e.g., myComponent.content.ts) with translations defined via t(), and a Preact component using useIntlayer('my-component').

How do I access translated text in the component?

Call const content = useIntlayer('my-component'); then use content.text to render the translated string, or content.text.value for a plain string.

How do I set up language switching or providers for Preact?

Configure Intlayer providers per the docs to supply language data, ensuring dictionaries are built with dictionaries for each locale and wired to the locale selection mechanism.

intlayer-preact

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

Files (1)

SKILL.md

2.1 KB

Intlayer Preact 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 Preact 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 Preact component (e.g., MyComponent.tsx) using the useIntlayer hook.

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

export default content;

Setup

Vite and Preact

useIntlayer Hook

import { useIntlayer } from "preact-intlayer";

const MyComponent = () => {
  const content = useIntlayer("my-component");

  return (
    <div>
      <h1>
        {/* Return content */}
        {content.text}
      </h1>
      {/* Return string (.value) */}
      <img src={content.text.value} alt={content.text.value} />
    </div>
  );
};

References

Source

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

Overview

Integrates Intlayer internationalization with Preact by declaring translations next to components. It emphasizes component-level content declarations using a content file and the useIntlayer hook to fetch translations. This keeps translations close to UI and works smoothly with Vite + Preact setups.

How This Skill Works

Create a content file next to the component that uses t() to define translations for a unique key. In the Preact component, call useIntlayer('your-key') to retrieve the translated content and render content.text (or content.text.value for plain strings). This pattern enables per-component translations with a simple dictionary structure.

When to Use It

Setting up Preact i18n in a Vite + Preact project
Creating a new translated component with its own dictionary
Using the useIntlayer hook to fetch translations in a component
Configuring Intlayer providers to supply language data across the app
Testing language switches by rendering content in multiple locales

Quick Start

Step 1: Create a content file next to your component and define translations with t(), exporting a dictionary with a unique key.
Step 2: Implement the component and call const content = useIntlayer('your-key'); render content.text and, if needed, content.text.value.
Step 3: Ensure Vite/Preact setup is configured and test switching locales to verify translations render correctly.

Best Practices

Place a content file (e.g., myComponent.content.ts) next to the component that uses it
Use t() in the content file to define multi-language strings
Maintain a stable, unique key that matches the useIntlayer() call
Keep keys and structure simple and consistent across components
Test rendering in all supported locales and verify content.text.value when needed

Example Use Cases

MyComponent.tsx uses useIntlayer('my-component') to render a translated header
src/components/MyComponent/myComponent.content.ts defines en/fr/es strings with t()
Vite + Preact setup includes intlayer-preact and loads dictionaries via providers
Content rendering uses content.text for UI and content.text.value for accessibility
Adding a new language updates translations across the related components

Frequently Asked Questions

Add this skill to your agents