React Integration: useDictionary Hook Documentation

このセクションでは、Reactアプリケーション内でuseDictionaryフックを使用するための詳細なガイダンスを提供し、視覚的なエディターなしでローカライズされたコンテンツを効率的に扱えるようにします。

Importing useDictionary in React

useDictionaryフックは、コンテキストに基づいてReactアプリケーションに統合できます：

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

  typescript

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

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

  typescript

  import { useDictionary } from "react-intlayer/server"; // サーバーサイドのReactコンポーネントで使用します

Parameters

このフックは2つのパラメーターを受け入れます：

1. dictionary: 特定のキーのローカライズされたコンテンツを含む宣言された辞書オブジェクト。
2. locale（オプション）：希望するロケール。指定されていない場合は、現在のコンテキストのロケールがデフォルトになります。

Content Declaration

すべての辞書オブジェクトは、型安全を確保し、ランタイムエラーを防ぐために構造化されたコンテンツファイルに宣言する必要があります。セットアップ手順についてはこちらを参照してください。以下は、コンテンツ宣言の例です：

import { t, type DeclarationContent } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      en: "Client Component Example",      fr: "Exemple de composant client",      es: "Ejemplo de componente cliente",    }),    content: t({      en: "This is the content of a client component example",      fr: "Ceci est le contenu d'un exemple de composant client",      es: "Este es el contenido de un ejemplo de componente cliente",    }),  },} satisfies DeclarationContent;export default componentContent;

Example Usage in React

以下は、Reactコンポーネント内でuseDictionaryフックを使用する方法の例です：

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

Server Integration

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

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

Notes on Attributes

視覚的なエディタを使用した統合とは異なり、buttonTitle.valueのような属性はここでは適用されません。代わりに、コンテンツに宣言されたローカライズされた文字列に直接アクセスします。

<button title={content.title}>{content.content}</button>

Additional Tips

• 型安全: 常にDeclarationContentを使用して辞書を定義し、型安全を確保してください。
• ローカライズの更新: コンテンツを更新するときは、すべてのロケールが一貫していることを確認し、翻訳が不足しないようにしてください。

このドキュメントは、useDictionaryフックの統合に焦点を当て、視覚的なエディタ機能に依存せずにローカライズされたコンテンツを管理するための合理化されたアプローチを提供します。