著者:
    Aymeric PINEAU
    作成:2025-02-07最終更新:2025-06-29

    React統合: useDictionary フック ドキュメント

    このセクションでは、Reactアプリケーション内でuseDictionaryフックを使用するための詳細なガイドを提供します。ビジュアルエディタなしでローカライズされたコンテンツを効率的に扱うことが可能です。

    Reactでの使用例

    ./ComponentExample.tsx
    import type { FC } from "react";
import { useDictionary } from "react-intlayer";
import componentContent from "./component.content";

const ComponentExample: FC = () => {
  const { title, content } = useDictionary(componentContent);

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
};

    サーバー統合

    IntlayerProvider の外で useDictionary フックを使用する場合、コンポーネントをレンダリングするときにロケールを明示的にパラメータとして渡す必要があります。

    ./ServerComponentExample.tsx
    import type { FC } from "react";
import { useDictionary } from "react-intlayer/server";
import clientComponentExampleContent from "./component.content";

const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
  const { content } = useDictionary(clientComponentExampleContent, locale);

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.content}</p>
    </div>
  );
};
    tuseI18n