mcpField
I
intlayer-react

intlayer-react

github.com/aymericzip開発86142 回インストール今日更新
リポジトリ

intlayer-react について

Intlayer で翻訳対応の React コンポーネントを作るためのスキルです。コンポーネントの近くにコンテンツを宣言し、`useIntlayer` フックで辞書をコンポーネントに接続します。

主な機能

  1. 01コンポーネント単位のコンテンツ宣言
  2. 02`t()` による翻訳辞書の作成
  3. 03`useIntlayer` フックの利用
  4. 04React 環境の参照情報

活用シーン

  1. 01React コンポーネントへの翻訳コンテンツ追加
  2. 02コンポーネントコードの近くで翻訳を管理
  3. 03辞書をコンポーネントに接続

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/aymericzip/intlayer --skill intlayer-react

インストール後、Claude Code で/intlayer-reactを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENCE.md
references/
environment_create-react-app.md
environment_lynx-and-react.md
environment_react-native-and-expo.md
environment_tanstack-start.md
environment_vite-and-react_react-router-v7-fs-routes.md
environment_vite-and-react_react-router-v7.md
environment_vite-and-react.md
packages_intlayer_exports.md
packages_react-intlayer_exports.md
packages_react-intlayer_IntlayerProvider.md
packages_react-intlayer_MarkdownRenderer.md
packages_react-intlayer_t.md
packages_react-intlayer_useDictionary.md
packages_react-intlayer_useI18n.md
packages_react-intlayer_useIntlayer.md
packages_react-intlayer_useLocale.md

詳細

Intlayer React の使用方法

基本理念

Intlayer は コンポーネントレベルのコンテンツ宣言を推進しています。大規模なグローバル翻訳ファイルを使う代わりに、コンテンツを、それを使用する React コンポーネントの隣にある *.content.ts ファイルで宣言します。

ワークフロー

翻訳されたコンポーネントを作成するには、2 つのファイルが必要です。

  1. 宣言： 辞書を定義するコンテンツファイル（例：myComponent.content.ts）。
  2. 実装： useIntlayer フックを使用する React コンポーネント（例：MyComponent.tsx）。
1. コンテンツを宣言する

翻訳には t() を使ってコンテンツファイルを作成します。 ファイル： 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 の使用方法

セットアップ

useIntlayer フック

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

参考資料

環境
パッケージ

コメント

Markdown 対応