What does useIntlayer return?

It returns an accessor function that you call to get reactive content.

How do I declare translations?

Use t() in a content file, provide locale dictionaries, and ensure the key matches the one used in useIntlayer.

How do I set up the environment?

Follow the Vite and Solid setup and import Solid Intlayer exports as described in the references.

intlayer-solid-js

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

Files (1)

SKILL.md

2.3 KB

Intlayer Solid 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 Solid 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 Solid 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 Solid

useIntlayer Hook

[!IMPORTANT] In Solid, useIntlayer returns an accessor function (e.g., content()). You must call this function to access the reactive content.

import { useIntlayer } from "solid-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

Website
Doc

Environments

Vite and Solid

Packages

Solid Intlayer Exports

Source

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

Overview

This skill wires Intlayer's per-component translations into SolidJS apps. It promotes declaring localized content next to the components that use them and implementing with the useIntlayer hook to render translations in the UI.

How This Skill Works

Translations are defined in a content file with t() for a unique key. A Solid component then calls useIntlayer with that key to obtain a reactive content accessor, which is read in JSX via content().

When to Use It

When you want to set up SolidJS i18n for a project.
When you need to create a translated component alongside its content file (e.g., myComponent.content.ts).
When you want to use the useIntlayer hook to access translations in Solid components.
When you prefer component-level content declarations instead of a single global translation file.
When configuring Vite and Solid with Intlayer following the documented setup.

Quick Start

Step 1: Create a content file with t() translations (e.g., myComponent.content.ts).
Step 2: Implement a Solid component that calls useIntlayer with the component key.
Step 3: Render the result by invoking the accessor (content()) in your JSX.

Best Practices

Place a *.content.ts file next to its Solid component file.
Use t() in content files to define per-locale strings.
Call the accessor returned by useIntlayer (content()) to read translations.
Ensure the content key matches what you pass to useIntlayer.
Test translations across en, fr, es to verify behavior.

Example Use Cases

Example: src/components/MyComponent/myComponent.content.ts defines key 'my-component' with en/fr/es translations.
Example: MyComponent.tsx uses useIntlayer('my-component') and renders content().text in JSX.
Example: A translated label for a button declared in a adjacent content file.
Example: Setting up Vite and Solid environment for Intlayer as documented.
Example: Multiple components each with its own content.ts, ensuring per-component localization.

Frequently Asked Questions

Add this skill to your agents