React Integration: useIntlayer Hook Documentation
هذا القسم يوفر إرشادات مفصلة حول استخدام useIntlayer في تطبيقات React، مما يتيح توطين المحتوى بكفاءة.
استيراد useIntlayer في React
يمكن دمج useIntlayer في تطبيقات React عن طريق استيراده بناءً على السياق:
مكون العميل:
typescriptimport { useIntlayer } from "react-intlayer"; // يُستخدم في مكونات React على جانب العميل
مكون الخادم:
المعلمات
يقبل الخطاف معلمتين:
- key: مفتاح القاموس لاسترجاع المحتوى الموطّن.
- locale (اختياري): اللغة المطلوبة. يتم استخدام لغة السياق الافتراضية إذا لم يتم تحديدها.
القاموس
يجب أن يتم إعلان جميع مفاتيح القاموس داخل ملفات تعريف المحتوى لتعزيز أمان النوع وتجنب الأخطاء. يمكنك العثور على تعليمات الإعداد هنا.
مثال على الاستخدام في React
عرض استخدام الخطاف useIntlayer داخل مكون React:
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 البصري: للحصول على تجربة إدارة محتوى أكثر سهولة، راجع وثائق المحرر البصري هنا.
هذا القسم يستهدف تحديدًا دمج الخطاف useIntlayer في تطبيقات React، مما يبسط عملية التوطين ويضمن تناسق المحتوى عبر اللغات المختلفة.
إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيق