مفتوح المصدر • مرخّص بموجب MIT

مكوّنات واجهة التوطين لـ React.

مكوّنات React مفتوحة المصدر للتدويل (i18n). ابنِ مبدّلات اللغة ومنتقيات الإعدادات المحلية وتخطيطات RTL في دقائق — مرخّصة بموجب MIT ويقودها المجتمع.

app.tsx
import { LanguageSwitcher } from '@babelize/elements';

export default function App() {
  return (
    <LanguageSwitcher variant="dropdown=" />
  );
}
قوية بشكل افتراضي

كل ما تحتاجه للتوطين.

مصممة لتطبيقات React الحديثة. ثبّتها وأطلقها عالمياً.

مبدّلات اللغة

مبدّلات جاهزة للاستخدام بقوائم منسدلة وحبوب وأعلام، مع دعم كامل لـ RTL.

منتقيات الإعدادات المحلية

منتقيات إعدادات محلية قابلة للبحث، بأسمائها الأصلية وأعلامها.

دعم تخطيط RTL

اكتشاف تلقائي لاتجاه RTL ومعالجة اتجاه التخطيط.

تكامل i18n

يعمل مع react-intl وnext-intl وi18next وLinguiJS وغيرها.

app.tsx
"use client";

import { LanguageSwitcher } from "@babelize/elements";

export default function App() {
 return (
 <LanguageSwitcher
 locales={[
 { code: "en" },
 { code: "fr" },
 { code: "es" },
 { code: "de" },
 { code: "ja" },
 { code: "ar" },
 ]}
 defaultValue="en"
 onValueChange={(code) => {
// next-intl
 router.push(`/${code}`);
// react-i18next
 i18n.changeLanguage(code);
 }}
 />
 );
}
الدعم

الأسئلة الشائعة

كل ما تحتاج معرفته عن استخدام Babelize Elements في مشاريع React. لم تجد ما تبحث عنه؟ اطّلع على نقاشات GitHub الخاصة بنا.

ثبّت المكتبة كاملةً باستخدام `npm install @babelize/elements`، أو أضف مكوّنات بعينها باستخدام `npx shadcn@latest add @babelize/language-switcher` (أو `npx @babelize/elements add language-switcher`). يعمل مع Next.js وRemix وأي تطبيق React.

بكل تأكيد. بما أنّك تملك الرمز، فكل مكوّن قابل للتخصيص بالكامل عبر فئات Tailwind CSS والخصائص. غيّر الألوان والمسافات والحركات والسلوك كما تشاء. لا توجد قيود تصميمية.

يراجع المشرفون كل مكوّن يُدمج، ويلتزم بقائمة التحقق الخاصة بإمكانية الوصول وTypeScript والتوطين قبل توثيقه. وتُستخدم هذه المكوّنات في تطبيقات الإنتاج حول العالم.

نعم، مرخّصة بموجب رخصة MIT ومجانية إلى الأبد. الرمز متاح على GitHub، والمساهمات مرحّب بها، ويمكنك استخدام المكوّنات في أي مشروع، تجاري أو غير تجاري. لا يُشترط ذكر المصدر.

يعمل Babelize Elements مع كل مكتبات i18n الرئيسية: next-intl وreact-i18next وreact-intl وLinguiJS وFormatJS وغيرها. المكوّنات مستقلة عن المكتبة، فمرّر حالة الإعدادات المحلية ودوال الاستدعاء الخاصة بك.

تصفح المشكلات المفتوحة على GitHub، وابنِ المكوّن وفق دليل المساهمة، ثم افتح pull request. يراجعه المشرفون ويدمجونه، ثم يُنشر في الوثائق للجميع.