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

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

استيراد useLocale في React

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

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

نظرة عامة

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

الاستخدام

إليك كيفية استخدام useLocale hook داخل مكون 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 hook، فإنه يُرجع كائنًا يحتوي على الخصائص التالية:

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

مثال

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

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 hook من react-intlayer أداة أساسية لإدارة اللغات في تطبيقات React الخاصة بك، حيث يوفر الوظائف اللازمة لتكييف تطبيقك مع جمهور دولي متنوع بشكل فعال.