این کتابخانه‌های مفید می‌توانند انتخابی عالی برای ساختن و سفارشی‌سازی برنامه‌های React شما به آسانی باشند.
می‌توانید از کتابخانه‌های مؤلفه‌ای استفاده کنید که عناصر از پیش ساخته شده و سبک‌دهی‌شده را برای ساده‌سازی فرآیند توسعه برنامه‌های React ارائه می‌دهند. این کتابخانه‌ها می‌توانند در زمان و تلاش زیادی صرفه‌جویی کنند، اما همچنین می‌توانند کنترل شما را بر استایل برنامه‌تان محدود کنند. اگر به کنترل بیشتری روی استایل برنامه‌های React خود نیاز دارید، از کتابخانه مؤلفه‌های بدون استایل استفاده کنید.
کتابخانه های اجزای Unstyled چیست؟
کتابخانه های مؤلفه بدون استایل برای توسعه برنامه های کاربردی React در دسترس استفاده می شود. آنها مجموعه ای از اجزای رابط کاربری قابل استفاده مجدد بدون سبک های از پیش تعریف شده هستند. آنها ساختار اصلی عناصر UI را بدون هیچ گونه سبکی در اختیار شما قرار می دهند. این به شما کنترل کاملی بر نحوه ظاهر و احساس اجزای خود می دهد.
مزایای کتابخانه اجزای Unstyled
در اینجا برخی از مزایای استفاده از کتابخانه های اجزای بدون استایل آورده شده است:
- کنترل کامل روی استایل: کتابخانه‌های مؤلفه بدون استایل به شما کنترل کامل بر ظاهر اجزای خود می‌دهند. شما می‌توانید از هر CSS یا فریمورک استایلی برای سفارشی کردن اجزای مورد نیاز خود استفاده کنید.
- افزایش سرعت توسعه: کتابخانه‌های مؤلفه‌های بدون استایل می‌توانند با ارائه مجموعه‌ای از مؤلفه‌های از پیش ساخته‌شده که می‌توانید در برنامه خود استفاده کنید، به توسعه سرعت بیشتری ببخشید.
- نگهداری آسان: نگهداری کتابخانه‌های مؤلفه‌های بدون استایل آسان است، زیرا به‌طور محکمی با چارچوب استایل خاصی مرتبط نیستند. این بدان معنی است که شما می توانید به راحتی استایل را بدون ایجاد تغییر در کد اصلی به روز کنید.
1. رابط کاربری رادیکس
Radix UI یک کتابخانه مؤلفه بدون استایل است که بر دسترسی تمرکز دارد. مجموعه ای از مولفه های رابط کاربری را ارائه می دهد که برای همه کاربران قابل دسترسی است. با استفاده از Radix UI می توانید برنامه های React زیبایی بسازید.
هنگام کار با Radix UI، می توانید به جای کل کتابخانه، اجزای جداگانه مورد نیاز خود را نصب کنید. این تضمین می کند که برنامه خود را سبک نگه دارید.
به عنوان مثال، اگر فقط به یک قطعه آکاردئونی نیاز دارید، می توانید با اجرای دستور زیر آن را در برنامه خود نصب کنید:
npm install @radix-ui/react-accordion
پس از نصب کامپوننت آکاردئون، می توانید آکاردئون ها را در برنامه React خود ایجاد کنید.
در اینجا مثالی از نحوه استفاده از مولفه آکاردئون آورده شده است:
import React from "react"
import * as Accordion from "@radix-ui/react-accordion"
export default function App() {
return (
<div>
<Accordion.Root type="single" defaultValue="item-1" collapsible>
<Accordion.Item value="item-1">
<Accordion.Trigger>Is this accordion unstyled?</Accordion.Trigger>
<Accordion.Content>Yes. It is unstyled.</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
)
}
بلوک کد بالا یک جزء اصلی آکاردئون بدون استایل را با استفاده از کتابخانه @radix-ui/react-accordion راه‌اندازی می‌کند و امکان جمع شدن آیتم‌های تاشو با محتوای قابل تنظیم را فراهم می‌کند.
کد یک آکاردئونی ایجاد می کند که به شکل زیر است:
2. واکنش آریا
کتابخانه React Aria مجموعه‌ای از قلاب‌ها برای ساخت رابط کاربری در React است. این کتابخانه با ارائه مجموعه‌ای از مؤلفه‌ها که بهترین شیوه‌های دسترسی را دنبال می‌کنند، ایجاد برنامه‌های کاربردی وب قابل دسترس را آسان‌تر می‌کند.
Adobe کتابخانه React Aria را توسعه و نگهداری می کند. این کتابخانه بخشی از سیستم طراحی طیف گسترده‌تر Adobe است که مجموعه‌ای جامع از دستورالعمل‌ها و منابع طراحی را برای ایجاد رابط‌های کاربری در دسترس ارائه می‌دهد. عناصر ارائه شده توسط کتابخانه React Aria بدون استایل هستند و به شما امکان می دهند عناصر را مطابق با نیازهای خود سفارشی کنید.
برای استفاده از React Aria در برنامه React خود، آن را با اجرای دستور زیر نصب کنید:
npm install react-aria
در اینجا مثالی از نحوه ایجاد یک جزء دکمه با استفاده از قلاب useButton آورده شده است:
import React from 'react'
import {useButton} from 'react-aria';
function Button(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (
<button {...buttonProps} ref={ref}>
{props.children}
</button>
);
}
export default Button;
اکنون می توانید کامپوننت دکمه را در هر کامپوننت دیگری که انتخاب می کنید وارد و رندر کنید.
مثلا:
import React from 'react'
import Button from './Button';
function App() {
return (
<Button>Click Me</Button>
);
}
export default App;
وقتی بلوک کد بالا را رندر می‌کنید، یک دکمه ساده به شکل زیر ایجاد می‌کند:
اگر استفاده از React Aria به دلیل قلاب ها ناراحت نیستید، به جای آن از کتابخانه React Aria Components استفاده کنید. این کتابخانه اجزای از پیش ساخته شده ای را ارائه می دهد که به طور پیش فرض قابل دسترسی هستند. این یک لایه نازک در بالای کتابخانه React Aria است. اجزای ارائه شده بدون استایل هستند، بنابراین این دو کتابخانه بسیار شبیه هستند.
3. رابط کاربری پایه
Base UI یک کتابخانه React UI بدون استایل است که اجزای UI را بدون استایل ارائه می دهد. تیم Material UI Base UI را با مجموعه‌ای از مؤلفه‌های اساسی ایجاد کرد که می‌توانید از آنها برای ساخت برنامه‌های React سفارشی خود استفاده کنید. آنها کتابخانه Base UI را بر اساس همان مهندسی قوی Material UI استوار کردند، اما Base UI طراحی متریال را پیاده سازی نمی کند.
با این دستور می توانید Base UI را در برنامه React خود نصب کنید:
npm install @mui/base
Base UI مؤلفه‌ها را در حال حرکت فراهم می‌کند، به این معنی که می‌توانید مستقیماً مؤلفه‌ها را از کتابخانه وارد کرده و از آنها استفاده کنید. همچنین قلاب هایی را ارائه می دهد که می توانید از آنها برای ایجاد و پیکربندی اجزای خود استفاده کنید.
در اینجا مثالی از استفاده از اجزای Base UI آورده شده است:
import React from "react";
import Button from "@mui/base/Button";
export default function App() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
این کد با استفاده از مولفه Button کتابخانه Base UI یک دکمه ساده ایجاد می کند. همچنین می توانید از قلاب useButton برای انجام همان کار استفاده کنید.
import React from "react";
import useButton from "@mui/base/useButton";
export default function App() {
const { getRootProps } = useButton();
return (
<div>
<button {...getRootProps()}>Click Me</button>
</div>
);
}
همانطور که در تصویر زیر نشان داده شده است، قلاب useButton و مولفه Button یک دکمه بدون استایل ایجاد می کنند.
4. رابط کاربری بدون سر
کتابخانه دیگری که می‌توانید کاوش کنید، Headless UI است که عناصر رابط کاربری بدون استایل را ارائه می‌کند و به شما این آزادی را می‌دهد که ظاهر و رفتار اجزای UI خود را به دلخواه شخصی‌سازی کنید.
با استفاده از دستور زیر می توانید کتابخانه را نصب کنید:
npm install @headlessui/react
پس از نصب کتابخانه، می‌توانید از چندین مؤلفه کتابخانه در برنامه React خود استفاده کنید.
مثلا:
import React from "react";
import { Popover } from "@headlessui/react";
export default function App() {
return (
<div>
<Popover>
<Popover.Button>Popover</Popover.Button>
<Popover.Panel>
<p>This is a Popover</p>
</Popover.Panel>
</Popover>
</div>
);
}
در این مثال، شما با استفاده از کامپوننت Popover از کتابخانه Headless UI یک popover ایجاد می کنید. بلوک کد بالا یک پاپاور به شکل زیر ایجاد می کند.
کنترل کامل را با کامپوننت های Unstyled دریافت کنید
کتابخانه های مؤلفه بدون استایل به شما کنترل کاملی بر استایل برنامه React می دهد و به شما امکان می دهد تجارب کاربری منحصر به فردی ایجاد کنید. این کتابخانه ها طیف وسیعی از گزینه ها را متناسب با نیازهای شما ارائه می دهند. شما می توانید با استفاده از کتابخانه های ذکر شده در بالا، برنامه های React از نظر بصری جذاب و بسیار قابل تنظیم ایجاد کنید.