React Integration: 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