دمج React: توثيق useDictionary Hook

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

استيراد useDictionary في React

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

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

  typescript

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

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

  typescript

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

المعاملات

يقبل الـ hook معاملين:

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",      ar: "مثال على مكون العميل",    }),    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",      ar: "هذا هو محتوى مثال على مكون العميل",    }),  },} satisfies Dictionary;export default exampleContent;

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

فيما يلي مثال على كيفية استخدام useDictionary hook في مكون 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 hook خارج 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 hook، مما يوفر نهجًا مبسطًا لإدارة المحتوى المحلي دون الاعتماد على وظائف المحرر المرئي.