أفضل 4 مكتبات للمكونات غير المصممة لإنشاء تطبيقات React قابلة للتخصيص

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

ما هي مكتبات المكونات غير النمطية؟

مكون غير مرتب تُستخدم المكتبات لتطوير تطبيقات React التي يمكن الوصول إليها. إنها مجموعات من مكونات واجهة المستخدم القابلة لإعادة الاستخدام دون أنماط محددة مسبقًا. أنها توفر لك البنية الأساسية لعناصر واجهة المستخدم دون أي تصميم. يمنحك هذا التحكم الكامل في شكل ومظهر مكوناتك.

فوائد مكتبات المكونات غير المصممة

فيما يلي بعض فوائد استخدام مكتبات المكونات غير المصممة:

• السيطرة الكاملة على التصميم: تمنحك مكتبات المكونات غير النمطية التحكم الكامل في كيفية ظهور مكوناتك. يمكنك استخدام أي CSS أو إطار عمل التصميم لتخصيص المكونات لتتناسب مع احتياجاتك.
• تسريع التنمية: يمكن أن تساعدك مكتبات المكونات غير المصممة على تسريع عملية التطوير من خلال توفير مجموعة من المكونات المعدة مسبقًا والتي يمكنك استخدامها في تطبيقك.
  instagram viewer
• سهلة الصيانة: من السهل صيانة مكتبات المكونات غير النمطية لأنها غير مقترنة بإحكام بأي إطار عمل محدد للتصميم. هذا يعني أنه يمكنك بسهولة تحديث التصميم دون إجراء تغييرات على الكود الأساسي.

Radix UI هي مكتبة مكونات غير مصممة تركز على إمكانية الوصول. فهو يوفر مجموعة من مكونات واجهة المستخدم المصممة لتكون في متناول جميع المستخدمين. أنت تستطيع إنشاء تطبيقات React جميلة باستخدام Radix UI.

عند العمل باستخدام Radix UI، يمكنك تثبيت المكونات الفردية التي تحتاجها بدلاً من المكتبة بأكملها. وهذا يضمن الحفاظ على تطبيقك خفيف الوزن.

على سبيل المثال، إذا كنت تحتاج فقط إلى مكون الأكورديون، فيمكنك تثبيته في التطبيق الخاص بك عن طريق تشغيل الأمر التالي:

npm install @radix-ui/react-accordion

بعد تثبيت مكون الأكورديون، يمكنك إنشاء الأكورديون في تطبيق React الخاص بك.

فيما يلي مثال لكيفية استخدام مكون الأكورديون:

import React from"react"
import * as Accordion from"@radix-ui/react-accordion"
exportdefaultfunctionApp() {
return (


"single" defaultValue="item-1" collapsible>
"item-1">
Is this accordion unstyled?</Accordion.Trigger>
Yes. It is unstyled.</Accordion.Content>
 </Accordion.Item>
 </Accordion.Root>
 </div>
 )
}

تقوم كتلة التعليمات البرمجية أعلاه بإعداد مكون الأكورديون الأساسي غير المصمم باستخدام ملف @radix-ui/react-accordion المكتبة، مما يسمح بالعناصر القابلة للطي ذات المحتوى القابل للتخصيص.

سيقوم الكود بإنشاء أكورديون يبدو كالتالي:

مكتبة React Aria عبارة عن مجموعة من الخطافات لبناء واجهات المستخدم في React. تسهل المكتبة إنشاء تطبيقات ويب يمكن الوصول إليها من خلال توفير مجموعة من المكونات التي تتبع أفضل الممارسات لإمكانية الوصول.

قامت شركة Adobe بتطوير مكتبة React Aria وصيانتها. تعد المكتبة جزءًا من نظام Adobe Spectrum Design System الأكثر شمولاً، والذي يوفر مجموعة شاملة من إرشادات التصميم والموارد لبناء واجهات مستخدم يمكن الوصول إليها. العناصر التي توفرها مكتبة React Aria غير مصممة، مما يسمح لك بتخصيص العناصر لتناسب احتياجاتك.

لاستخدام React Aria في تطبيق React الخاص بك، قم بتثبيته عن طريق تشغيل الأمر التالي:

npm install react-aria

فيما يلي مثال لكيفية إنشاء مكون زر باستخدام useButton خطاف:

import React from'react'
import {useButton} from'react-aria';
functionButton(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (

 {props.children}
 </button>
 );
}
exportdefault Button;

يمكنك الآن استيراد وتقديم ملف زر مكون في أي مكون آخر تختاره.

على سبيل المثال:

import React from'react'
import Button from'./Button';
functionApp() {
return (
Click Me</Button>
 );
}
exportdefault App;

عندما تقوم بعرض مقطع التعليمات البرمجية أعلاه، فإنه سيتم إنشاء زر بسيط يشبه هذا:

إذا كنت غير مرتاح لاستخدام React Aria بسبب الخطافات، فاستخدم رد فعل مكونات الأغنية المكتبة بدلا من ذلك. توفر هذه المكتبة مكونات تم إنشاؤها مسبقًا والتي يمكن الوصول إليها افتراضيًا. إنها طبقة رقيقة أعلى مكتبة React Aria. المكونات المتوفرة غير مُصممة، لذا فإن المكتبتين متشابهتان جدًا.

واجهة المستخدم الأساسية عبارة عن مكتبة React UI غير مُصممة توفر مكونات واجهة المستخدم بدون تصميم. أنشأ فريق واجهة المستخدم المادية واجهة المستخدم الأساسية مع مجموعة من المكونات الأساسية التي يمكنك استخدامها لإنشاء تطبيقات React المخصصة الخاصة بك. لقد أسسوا مكتبة Base UI على نفس الشيء هندسة قوية مثل واجهة المستخدم المادية، لكن واجهة المستخدم الأساسية لا تطبق التصميم متعدد الأبعاد.

يمكنك تثبيت Base UI في تطبيق React الخاص بك باستخدام هذا الأمر:

npm install @mui/base

توفر واجهة المستخدم الأساسية المكونات أثناء التنقل، مما يعني أنه يمكنك استيراد المكونات واستخدامها من المكتبة مباشرةً. كما يوفر أيضًا خطافات يمكنك استخدامها لإنشاء مكوناتك وتكوينها.

فيما يلي مثال لاستخدام مكونات Base UI:

import React from"react";
import Button from"@mui/base/Button";
exportdefaultfunctionApp() {
return (


Click Me</Button>
 </div>
 );
}

يقوم هذا الكود بإنشاء زر بسيط باستخدام زر أحد مكونات مكتبة Base UI. يمكنك أيضًا استخدام useButton ربط لأداء نفس المهمة.

import React from"react";
import useButton from"@mui/base/useButton";
exportdefaultfunctionApp() {
const { getRootProps } = useButton();
return (


Click Me</button>
 </div>
 );
}

ال useButton هوك و زر سيقوم المكون بإنشاء زر غير مرتب، كما هو موضح في الصورة أدناه.

هناك مكتبة أخرى يمكنك استكشافها وهي Headless UI، والتي توفر عناصر واجهة مستخدم غير منسقة، مما يمنحك الحرية في تخصيص مظهر وسلوك مكونات واجهة المستخدم الخاصة بك على النحو الذي تراه مناسبًا.

يمكنك تثبيت المكتبة باستخدام الأمر التالي:

npm install @headlessui/react

بعد تثبيت المكتبة، يمكنك استخدام المكونات المتعددة التي توفرها المكتبة في تطبيق React الخاص بك.

على سبيل المثال:

import React from"react";
import { Popover } from"@headlessui/react";
exportdefaultfunctionApp() {
return (




Popover</Popover.Button>

This is a Popover</p>
 </Popover.Panel>
 </Popover>
 </div>
 );
}

في هذا المثال، يمكنك إنشاء نافذة منبثقة باستخدام البوب مكون من مكتبة Headless UI. ستقوم كتلة التعليمات البرمجية أعلاه بإنشاء نافذة منبثقة تبدو هكذا.

احصل على تحكم كامل مع المكونات غير المصممة

تمنحك مكتبات المكونات غير المصممة تحكمًا كاملاً في تصميم تطبيق React الخاص بك، مما يسمح لك بإنشاء تجارب مستخدم فريدة. توفر هذه المكتبات مجموعة من الخيارات التي تناسب احتياجاتك. يمكنك إنشاء تطبيقات React جذابة بصريًا وقابلة للتخصيص بدرجة كبيرة من خلال الاستفادة من المكتبات المذكورة أعلاه.