mcpField
I
intlayer-react

intlayer-react

github.com/aymericzip開発562 回インストール6 週間前に更新
リポジトリ

intlayer-react について

intlayer-reactは、ReactプロジェクトでIntlayerを使うためのスキルです。コンポーネントの近くでコンテンツを宣言し、フックから利用する方法を開発者向けに説明します。

主な機能

  1. 01コンポーネントの近くでコンテンツ辞書を宣言
  2. 02t()による翻訳の定義
  3. 03useIntlayerフックでコンテンツを取得
  4. 04複数のReactアプリ構成を掲載

活用シーン

  1. 01Reactコンポーネントへの多言語コンテンツ追加
  2. 02コンポーネント実装で宣言済み辞書を参照
  3. 03異なるReact環境でのIntlayer設定の参照

インストール

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

$npx skills add https://github.com/aymericzip/intlayer-skills --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 対応