تكامل 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 DeclarationContent } 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 DeclarationContent;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>

نصائح إضافية

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

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