تكامل React: توثيق هوك useDictionary

يوفر هذا القسم إرشادات مفصلة حول استخدام هوك useDictionary داخل تطبيقات React، مما يتيح التعامل الفعال مع المحتوى المحلي دون الحاجة إلى محرر بصري.

استيراد useDictionary في React

يمكن دمج هوك useDictionary في تطبيقات React عن طريق استيراده بناءً على السياق:

• مكون العميل:

  import { useDictionary } from "next-intlayer"; // يستخدم في مكونات React على جانب العميل

  import { useDictionary } from "next-intlayer"; // يستخدم في مكونات React على جانب العميل

  const { useDictionary } = require("next-intlayer"); // يستخدم في مكونات React على جانب العميل

• مكون الخادم:

  import { useDictionary } from "next-intlayer/server"; // يستخدم في مكونات React على جانب الخادم

  import { useDictionary } from "next-intlayer/server"; // يستخدم في مكونات React على جانب الخادم

  const { useDictionary } = require("next-intlayer/server"); // يستخدم في مكونات React على جانب الخادم

المعاملات

تقبل الدالة (الهوك) معاملين:

1. dictionary: كائن قاموس معلن يحتوي على محتوى مترجم لمفاتيح محددة.
2. locale (اختياري): اللغة المطلوبة. يتم الافتراض أنها لغة السياق الحالي إذا لم يتم تحديدها.

القاموس

يجب إعلان جميع كائنات القاموس في ملفات محتوى منظمة لضمان سلامة النوع ومنع أخطاء وقت التشغيل. يمكنك العثور على تعليمات الإعداد هنا. إليك مثال على إعلان المحتوى:

import { t, type Dictionary } from "intlayer";

const exampleContent = {
  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 Dictionary;

export default exampleContent;

مثال على الاستخدام في مكون عميل React

فيما يلي مثال على كيفية استخدام الخطاف useDictionary في مكون React:

"use client";

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

const ClientComponentExample: FC = () => {
  const { title, content } = useDictionary(clientComponentExampleContent);

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

مثال على الاستخدام في مكون خادم React

إذا كنت تستخدم الخطاف useDictionary خارج IntlayerServerProvider، يجب توفير اللغة صراحة كمعامل عند عرض المكون:

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

const ServerComponentExample: FC = () => {
  const { content } = useDictionary(clientComponentExampleContent);

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

ملاحظات حول السمات

على عكس التكاملات التي تستخدم المحررات المرئية، لا تنطبق السمات مثل buttonTitle.value هنا. بدلاً من ذلك، قم بالوصول مباشرة إلى السلاسل المحلية كما هو معلن في المحتوى الخاص بك.

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

نصائح إضافية

• سلامة النوع: استخدم دائمًا Dictionary لتعريف القواميس الخاصة بك لضمان سلامة النوع.
• تحديثات الترجمة: عند تحديث المحتوى، تأكد من اتساق جميع اللغات لتجنب فقدان الترجمات.

تركز هذه الوثائق على دمج الخطاف useDictionary، مما يوفر نهجًا مبسطًا لإدارة المحتوى المحلي دون الاعتماد على وظائف المحرر المرئي.