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

يوفر هذا القسم تفاصيل شاملة حول هوك useLocale من مكتبة react-intlayer، المصممة لإدارة الإعدادات المحلية في تطبيقات React.

استيراد useLocale في React

لدمج هوك useLocale في تطبيق React الخاص بك، قم باستيراده من الحزمة الخاصة به:

import { useLocale } from "react-intlayer"; // يستخدم في مكونات React لإدارة الإعدادات المحلية

نظرة عامة

يوفر هوك useLocale طريقة سهلة للوصول إلى إعدادات اللغة والتعامل معها داخل مكونات React. حيث يتيح الوصول إلى اللغة الحالية، اللغة الافتراضية، جميع اللغات المتاحة، بالإضافة إلى دوال لتحديث إعدادات اللغة.

الاستخدام

إليك كيفية استخدام هوك useLocale داخل مكون React:

import type { FC } from "react";import { useLocale } from "react-intlayer";const LocaleSwitcher: FC = () => {  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();  return (    <div>      <h1>اللغة الحالية: {locale}</h1>      <p>اللغة الافتراضية: {defaultLocale}</p>      <select value={locale} onChange={(e) => setLocale(e.target.value)}>        {availableLocales.map((loc) => (          <option key={loc} value={loc}>            {loc}          </option>        ))}      </select>    </div>  );};export default LocaleSwitcher;

المعاملات وقيم الإرجاع

عند استدعاء هوك useLocale، فإنه يعيد كائنًا يحتوي على الخصائص التالية:

• locale: اللغة الحالية كما تم تعيينها في سياق React.
• defaultLocale: اللغة الأساسية المعرفة في الإعدادات.
• availableLocales: قائمة بجميع اللغات المتاحة كما هو معرف في الإعدادات.
• setLocale: دالة لتحديث اللغة الحالية ضمن سياق التطبيق.

مثال

يوضح هذا المثال مكونًا يستخدم هوك useLocale لعرض مبدل اللغة، مما يسمح للمستخدمين بتغيير لغة التطبيق ديناميكيًا:

import type { FC } from "react";import { useLocale } from "react-intlayer";const LocaleSelector: FC = () => {  const { locale, setLocale, availableLocales } = useLocale();  const handleLocaleChange = (newLocale) => {    setLocale(newLocale);  };  return (    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>      {availableLocales.map((locale) => (        <option key={locale} value={locale}>          {locale}        </option>      ))}    </select>  );};

الخاتمة

تُعدّ الخطاف useLocale من مكتبة react-intlayer أداة أساسية لإدارة اللغات في تطبيقات React الخاصة بك، حيث توفر الوظائف اللازمة لتكييف تطبيقك مع جماهير دولية متنوعة بفعالية.

تاريخ الوثيقة

• 5.5.10 - 2025-06-29: بدء التاريخ