هنگام ساخت فرم‌ها در برنامه‌های React، کتابخانه React Select یکی از محبوب‌ترین گزینه‌هاست که تقریباً هر چیزی که برای ساخت ورودی‌های select قابل تنظیم نیاز داریم، ارائه می‌دهد. برخی از ویژگی‌های کلیدی آن شامل موارد زیر است:
اگرچه React Select برای بسیاری از موارد کاربردی عالی است، اما ممکن است بهترین راه حل برای همه پروژه‌ها نباشد. این کتابخانه می‌تواند برای موارد استفاده پیچیده‌تر، بیش از حد ساده باشد و در برخی موارد باعث مشکلات عملکرد یا یکپارچگی شود. محدودیت‌های زیر را در نظر می‌گیریم:
در این مقاله قصد داریم تا با React Select و کتابخانه‌های جایگزین آن آشنا شویم و ویژگی‌ها، مزایا، معایب و نحوه استفاده از آن‌ها را بررسی کنیم.
کتابخانه‌های زیر برخی از جایگزین‌های React Select هستند که فعالانه نگه‌داری می‌شوند و communityهای بزرگی دارند. هر یک از این کتابخانه‌ها در موارد استفاده خاص مزیت‌های خود را دارا می‌باشند.
Downshift یک کتابخانه کامپوننت Select است که برای بهبود دسترس‌پذیری و عملکرد ورودی‌های combobox یا تکمیل خودکار طراحی شده و الگوی دسترس‌پذیری ARIA را دنبال می‌کند. این کتابخانه تعاملات کاربر و state را مدیریت کرده و به توسعه‌دهندگان این امکان را می‌دهد تا با یک API ساده، کامپوننت‌های combobox یا تکمیل خودکار و Select ایجاد کنند.
Downshift مجموعه‌ای از هوک‌های React ارائه می‌دهد که منطق Stateful را برای فانکشنال و دسترس‌پذیر کردن کامپوننت‌ها فراهم می‌کنند. این هوک‌ها شامل:
useSelect برای ایجاد کامپوننت‌های Select سفارشی، useCombobox برای ورودی‌های combobox یا تکمیل خودکار و useMultipleSelection برای انتخاب چندگانه در Select یا comboboxها می‌باشند.
همینطور، Downshift منطق لازم برای دسترس‌پذیر و فانکشنال کردن کامپوننت‌ها را ارائه داده و در عین حال به توسعه‌دهندگان آزادی کامل در ساخت رابط کاربری می‌دهد.
ref برای دسترسی به مقادیر ورودی در مواقع لازم استفاده کنند.از دستور زیر برای نصب Downshift استفاده می‌کنیم:
npm install --save downshift
سپس، آن را import کرده و مورد استفاده قرار می‌دهیم:
import React, { useState } from 'react';
import Downshift from 'downshift';
const items = [
{value: 'apple'},
{value: 'pear'},
{value: 'orange'},
{value: 'grape'},
{value: 'banana'},
]
function MySelect() {
return (
<Downshift
onChange={selection =>
alert(selection ? `You selected ${selection.value}` : 'Selection Cleared')
}
itemToString={item => (item ? item.value : '')}
>
{({
getInputProps,
getItemProps,
getLabelProps,
getMenuProps,
isOpen,
inputValue,
highlightedIndex,
selectedItem,
getRootProps,
}) => (
<div>
<label {...getLabelProps()}>Enter a fruit</label>
<div
style={{display: 'inline-block'}}
{...getRootProps({}, {suppressRefError: true})}
>
<input {...getInputProps()} />
</div>
<ul {...getMenuProps()}>
{isOpen
? items
.filter(item => !inputValue || item.value.includes(inputValue))
.map((item, index) => (
<li
{...getItemProps({
key: item.value,
index,
item,
style: {
backgroundColor:
highlightedIndex === index ? 'lightgray' : 'white',
fontWeight: selectedItem === item ? 'bold' : 'normal',
},
})}
>
{item.value}
</li>
))
: null}
</ul>
</div>
)}
</Downshift>
);
}
export default MySelect;
Choices.js یک کتابخانه جاوااسکریپت برای ایجاد select boxهای سفارشی، ورودی‌های متنی و ورودی‌های multi-select است. این کتابخانه به دلیل انعطاف‌پذیری و توانایی مدیریت کامپوننت‌های select پیچیده، بدون وابستگی به jQuery محبوب می‌باشد. این کتابخانه مشابه Select2 و Selectize است، اما چون با استفاده از جاوااسکریپت ساده نوشته شده است، بنابراین سبک‌تر و مدرن‌تر می‌باشد.
کتابخانه Choices.js به توسعه‌دهندگان این امکان را می‌دهد تا ورودی‌های select داینامیک ایجاد کنند، چه انتخاب تک یا multi-select، در حالی که رفتارهایی مانند مرتب‌سازی، جستجو، متن پیش‌فرض و امکان افزودن گزینه‌های سفارشی را کنترل کنند. توسعه‌دهندگان می‌توانند استایل‌های المنت‌های select را مطابق با طراحی اپلیکیشن خود سفارشی‌سازی نمایند. علاوه بر این، Choices.js توابع callback برای تعاملات کاربر دارد و ورودی‌های متنی را با ویژگی‌هایی مانند برچسب‌گذاری، اعتبارسنجی و محدود کردن ورودی‌ها گسترش می‌دهد.
برای نصب Choices.js از دستور زیر استفاده می‌کنیم:
npm install choices.js
سپس، Choices.js را import کرده و به شکل زیر آن را مورد استفاده قرار می‌دهیم:
import React, { useEffect, useRef } from 'react';
import Choices from 'choices.js';
function MySelect() {
const selectRef = useRef(null);
useEffect(() => {
const choices = new Choices(selectRef.current, {
choices: ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'],
placeholder: 'Select an item',
searchChoices: true,
});
return () => {
choices.destroy();
};
}, []);
return (
<select ref={selectRef}>
<option value="">Select an item</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="durian">Durian</option>
<option value="elderberry">Elderberry</option>
</select>
);
}
export default MySelect;
React Mobile Picker جایگزینی مستقیم برای React Select نیست، اما یک کتابخانه سبک و ساده است که رابط کاربری قابل تنظیم و ساده‌ای را برای انتخاب آیتم‌ها از یک لیست ارائه می‌دهد. این کتابخانه برای اپلیکیشن‌هایی مناسب است که کاربران باید از میان گزینه‌هایی مثل تاریخ، زمان، یا لیست‌های سفارشی انتخاب کنند. این کتابخانه از select boxهای سبک iOS الهام گرفته و تجربه کاربری زیبا و ساده‌ای برای انتخاب گزینه‌ها فراهم می‌کند.
برای نصب این کتابخانه از دستور زیر استفاده می‌کنیم:
npm install react-mobile-picker
سپس، آن را import کرده و به شکل زیر مورد استفاده قرار می‌دهیم:
import { useState } from 'react'
import Picker from 'react-mobile-picker'
const selections = {
title: ['Mr.', 'Mrs.', 'Ms.', 'Dr.'],
firstName: ['John', 'Micheal', 'Elizabeth'],
lastName: ['Lennon', 'Jackson', 'Jordan', 'Legend', 'Taylor']
}
function MyPicker() {
const [pickerValue, setPickerValue] = useState({
title: 'Mr.',
firstName: 'Micheal',
lastName: 'Jordan'
})
return (
<Picker value={pickerValue} onChange={setPickerValue}>
{Object.keys(selections).map(name => (
<Picker.Column key={name} name={name}>
{selections[name].map(option => (
<Picker.Item key={option} value={option}>
{option}
</Picker.Item>
))}
</Picker.Column>
))}
</Picker>
)
}
rc-select یک کتابخانه کامپوننت select برای اپلیکیشن‌های React است که حالت‌های مختلفی از جمله انتخاب تکی، چندگانه و تگ‌ها را ارائه می‌دهد. این کتابخانه با مرورگرهای مختلف مانند IE11+، Chrome، Firefox و Safari سازگار است و دسترس‌پذیری را برای همه کاربران تضمین می‌کند.
یکی از قابلیت‌های مهم rc-select، پشتیبانی از navigation با صفحه کلید است. کاربران می‌توانند با فوکوس یا کلیک روی فیلد ورودی، منوی انتخاب را باز کنند و از کلیدهایی مانند
keyDown ،keyUp و enter برای حرکت در منو استفاده نمایند. این ویژگی‌ها باعث شده است تا این کتابخانه، انتخاب محبوبی برای ساخت فرم‌های پیشرفته در React باشد.
با استفاده از دستور زیر rc-select را نصب می‌کنیم:
npm i rc-select
سپس آن را import کرده و به صورت زیر مورد استفاده قرار می‌دهیم:
import React from 'react';
import Select, { Option } from 'rc-select';
const App = () => {
function onChange(value) {
console.log(`selected ${value}`);
}
return (
<div>
<div style={{ height: 150 }} />
<h2>Single Select</h2>
<div style={{ width: 300 }}>
<Select
allowClear
placeholder="placeholder"
defaultValue="lucy"
style={{ width: '100%' }}
animation="slide-up"
showSearch
onChange={onChange}
dropdownStyle={{
width: 'auto',
}}
>
<Option value="jack">
<b
style={{
color: 'red',
}}
>
jack
</b>
</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>
disabled
</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
</div>
</div>
);
};
React Dropdown Select یک جایگزین سبک برای React Select است که یک کامپوننت dropdown select و multi-select ساده و قابل تنظیم را برای React فراهم می‌کند. این کتابخانه از طریق props قابل پیکربندی است و امکان سفارشی‌سازی کامل کامپوننت‌ها را از طریق render prop callbacks فراهم می‌کند، که به ما دسترسی به props داخلی، state و متدها را می‌دهد. می‌توانیم این کامپوننت را با استفاده از CSS یا کامپوننت‌های سفارشی استایل‌دهی کنیم. همینطور از portal برای رندر dropdown خارج از درخت DOM لوکال پشتیبانی می‌کند. علاوه بر این، دارای ویژگی auto-position است و حجم bundle کوچکی در حدود ۱۶٫۷ کیلوبایت دارد.
React Dropdown Select برای پروژه‌هایی که به یک کامپوننت dropdown ساده نیاز دارند، بدون پیچیدگی‌های کتابخانه‌های پیشرفته‌تر، ایده‌آل است و در عین حال عملکرد را در اولویت قرار می‌دهد.
برای نصب کتابخانه از دستور زیر استفاده می‌کنیم:
npm install --save react-dropdown-select
سپس، آن را import کرده و به شکل زیر مورد استفاده قرار می‌دهیم:
import Select from 'react-dropdown-select';
const items = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'];
function MySelectDropdown() {
return (
<Select
options={items}
values={[]}
dropdownHandleRenderer={({ state }) => (
<span>{state.dropdown ? '–' : '+'}</span>
)}
onChange={(value) => console.log(value)}
/>
)
}
برخی از کتابخانه‌ها، کامپوننت‌های headless select ارائه می‌دهند. این کامپوننت‌ها بدون اینکه استایل‌های خاصی را اعمال کنند، بر روی منطق و رفتار تمرکز دارند. به همین دلیل، برای ادغام در سیستم‌های طراحی موجود مناسب هستند. از گزینه‌های محبوب می‌توانیم به Mantine، Radix UI و MUI Select (که بخشی از Material-UI است) اشاره کنیم.
Mantine یک کتابخانه کامل است که علاوه بر کامپوننت‌های headless، گزینه‌های از پیش استایل شده را نیز ارائه می‌دهد. این کتابخانه شامل کامپوننت‌های متنوعی است و سطح بالایی از قابلیت سفارشی‌سازی را فراهم می‌کند.
Radix UI کامپوننت‌های headless با تمرکز بر دسترس‌پذیری و طراحی بدون استایل ارائه می‌دهد، به طوری که توسعه‌دهندگان می‌توانند آن‌ها را به دلخواه سفارشی کنند.
MUI Select بخشی از کتابخانه Material-UI در React است و یک کامپوننت select داخلی ارائه می‌دهد که اصول طراحی متریال گوگل را دنبال می‌کند.
این کامپوننت‌های headless select به ما این امکان را می‌دهند که رابط‌های کاربری مدرن و شیک بسازیم و کنترل کاملی روی ظاهر آن‌ها داشته باشیم.
در این مقاله، برخی از بهترین کتابخانه‌های کامپوننت select برای React را بررسی کردیم، از جمله React Select و جایگزین‌های آن مثل Downshift، Choices.js، React Mobile Picker، rc-select و کتابخانه‌های Headless UI مانند Mantine و Radix UI. این کتابخانه‌ها بسته به نیاز پروژه، امکانات و انعطاف‌پذیری‌های متنوعی را ارائه می‌دهند.