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

    このセクションでは、Reactアプリケーション内でuseIntlayerフックを使用するための詳細なガイダンスを提供し、効率的なコンテンツのローカライズを可能にします。

    ReactでのuseIntlayerのインポート

    useIntlayerフックは、コンテキストに基づいてインポートすることでReactアプリケーションに統合できます。

    • クライアントコンポーネント:

      typescript
      import { useIntlayer } from "react-intlayer"; // クライアントサイドのReactコンポーネントで使用

    • サーバーコンポーネント:

    パラメータ

    このフックは2つのパラメータを受け取ります:

    1. key: ローカライズされたコンテンツを取得するための辞書キー。
    2. locale (オプション): 希望するロケール。指定されていない場合はコンテキストのロケールがデフォルトになります。

    辞書

    すべての辞書キーは、型の安全性を高め、エラーを防ぐためにコンテンツ宣言ファイル内で宣言する必要があります。セットアップ手順はこちらをご覧ください。

    Reactでの使用例

    Reactコンポーネント内でのuseIntlayerフックの使用例を示します:

    src/app.tsx
    import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const content = useIntlayer("homepage", locale); // ホームページのコンテンツを取得  return (    <>      <p>{content.introduction}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};
    src/components/ComponentExample.tsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const ComponentExample: FC = () => {  const content = useIntlayer("component-example"); // コンポーネント例のコンテンツを取得  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};
    src/components/ServerComponentExample.tsx
    import { useIntlayer } from "react-intlayer/server";const ServerComponentExample = () => {  const content = useIntlayer("server-component"); // サーバーコンポーネントのコンテンツを取得  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

    属性の処理

    属性をローカライズする際には、適切にコンテンツ値にアクセスします:

    jsx
    <button title={content.buttonTitle.value}>{content.buttonText}</button>

    追加リソース

    • Intlayerビジュアルエディター: より直感的なコンテンツ管理体験のために、ビジュアルエディターのドキュメントはこちらをご覧ください。

    このセクションは、ReactアプリケーションでのuseIntlayerフックの統合に特化しており、ローカライズプロセスを簡素化し、異なるロケール間でのコンテンツの一貫性を確保します。

    このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

    ドキュメントへのGitHubリンク
    tuseIntlayerAsync