بررسی بهترین کتابخانه‌های کامپوننت Select در React

هنگام ساخت فرم‌ها در برنامه‌های React، کتابخانه React Select یکی از محبوب‌ترین گزینه‌هاست که تقریباً هر چیزی که برای ساخت ورودی‌های select قابل تنظیم نیاز داریم، ارائه می‌دهد. برخی از ویژگی‌های کلیدی آن شامل موارد زیر است:

  • Multi-select
  • Async options
  • Fixed options
  • Full accessibility
  • Advanced filtering capabilities

اگرچه React Select برای بسیاری از موارد کاربردی عالی است، اما ممکن است بهترین راه حل برای همه پروژه‌ها نباشد. این کتابخانه می‌تواند برای موارد استفاده پیچیده‌تر، بیش از حد ساده باشد و در برخی موارد باعث مشکلات عملکرد یا یکپارچگی شود. محدودیت‌های زیر را در نظر می‌گیریم:

  • عملکرد: React Select با دیتاست‌های بزرگ یا رابط‌های کاربری پیچیده عملکرد خوبی ندارد و می‌تواند تجربه کاربری را تحت تأثیر قرار دهد.
  • سفارشی‌سازی: این کتابخانه بسیار قابل تنظیم است اما برای سفارشی‌سازی‌های عمیق‌تر، مانند select‌های تودرتو و برخی گزینه‌های پیشرفته استایل‌دهی، نیاز به تلاش بیشتری دارد که می‌تواند باعث افزایش حجم کد شود.
  • شیب یادگیری: داشتن ویژگی‌های زیاد می‌تواند شیب یادگیری را برای توسعه‌دهندگانی که به چیزی ساده‌تر یا با امکانات کم‌تر نیاز دارند، افزایش دهد.
  • سازگاری با مرورگر: در حالی که React Select به طور کلی به خوبی پشتیبانی می‌شود، اما ممکن است در مرورگرهای وب قدیمی‌تر مشکلاتی ایجاد کند. برخی از ویژگی‌های پیشرفته ممکن است در Internet Explorer یا نسخه‌های بسیار قدیمی Chrome یا Firefox کار نکنند. مرورگرهای موبایل نیز می‌توانند باعث رفتارهای غیرمنتظره شوند، به‌ویژه در eventهای لمسی.
  • حجمBundle: برای پروژه‌هایی با نیازهای عملکردی سختگیرانه، حجم bundle 29.5 کیلوبایتی React Select می‌تواند یک نگرانی باشد.

در این مقاله قصد داریم تا با React Select و کتابخانه‌های جایگزین آن آشنا شویم و ویژگی‌ها، مزایا، معایب و نحوه استفاده از آن‌ها را بررسی کنیم.

جایگزین‌های React Select

کتابخانه‌های زیر برخی از جایگزین‌های React Select هستند که فعالانه نگه‌داری می‌شوند و communityهای بزرگی دارند. هر یک از این کتابخانه‌ها در موارد استفاده خاص مزیت‌های خود را دارا می‌باشند.

Downshift

Downshift یک کتابخانه کامپوننت Select است که برای بهبود دسترس‌پذیری و عملکرد ورودی‌های combobox یا تکمیل خودکار طراحی شده و الگوی دسترس‌پذیری ARIA را دنبال می‌کند. این کتابخانه تعاملات کاربر و state را مدیریت کرده و به توسعه‌دهندگان این امکان را می‌دهد تا با یک API ساده، کامپوننت‌های combobox یا تکمیل خودکار و Select ایجاد کنند.

Downshift مجموعه‌ای از هوک‌های React ارائه می‌دهد که منطق Stateful را برای فانکشنال و دسترس‌پذیر کردن کامپوننت‌ها فراهم می‌کنند. این هوک‌ها شامل: useSelect برای ایجاد کامپوننت‌های Select سفارشی، useCombobox برای ورودی‌های combobox یا تکمیل خودکار و useMultipleSelection برای انتخاب چندگانه در Select یا comboboxها می‌باشند.

همینطور، Downshift منطق لازم برای دسترس‌پذیر و فانکشنال کردن کامپوننت‌ها را ارائه داده و در عین حال به توسعه‌دهندگان آزادی کامل در ساخت رابط کاربری می‌دهد.

مزایای Downshift

  • بسیار قابل تنظیم است و ویژگی‌های دسترس‌پذیری را به صورت آماده ارائه می‌دهد.
  • کنترل دقیق بر رفتار کامپوننت‌ها را بدون تحمیل طراحی خاصی فراهم می‌کند.
  • برای ایجاد تعاملات، رندرها و استایل‌های پیچیده و سفارشی Select مناسب است.
  • از فرم‌های کنترل‌شده (Controlled) و کنترل‌نشده (Uncontrolled) در React پشتیبانی می‌کند و به توسعه‌دهندگان این امکان را می‌دهد تا سبک مدیریت فرم مناسب برای موارد استفاده خود را انتخاب کنند. فرم‌های کنترل‌شده، مقادیر ورودی را در state کامپوننت ذخیره می‌کنند. فرم‌های کنترل‌نشده به DOM اجازه می‌دهند داده‌های فرم را مدیریت کرده و از ref برای دسترسی به مقادیر ورودی در مواقع لازم استفاده کنند.
  • با React، React Native و Preact به خوبی ادغام می‌شود.

معایب Downshift

  • پیاده‌سازی رابط کاربری در مقایسه با کتابخانه‌های دیگری که طراحی‌های آماده ارائه می‌دهند، به تلاش بیشتری نیاز دارد.
  • ممکن است برای توسعه‌دهندگانی که به دنبال راه‌حل‌های سریع و بدون نیاز به سفارشی‌سازی هستند، بهترین گزینه نباشد.
  • نیاز به کدهای پایه (Boilerplate) بیشتری برای راه‌اندازی دارد.

نحوه استفاده از Downshift

از دستور زیر برای نصب 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

Choices.js یک کتابخانه جاوااسکریپت برای ایجاد select boxهای سفارشی، ورودی‌های متنی و ورودی‌های multi-select است. این کتابخانه به دلیل انعطاف‌پذیری و توانایی مدیریت کامپوننت‌های select پیچیده، بدون وابستگی به jQuery محبوب می‌باشد. این کتابخانه مشابه Select2 و Selectize است، اما چون با استفاده از جاوااسکریپت ساده نوشته شده است، بنابراین سبک‌تر و مدرن‌تر می‌باشد.

کتابخانه Choices.js به توسعه‌دهندگان این امکان را می‌دهد تا ورودی‌های select داینامیک ایجاد کنند، چه انتخاب تک یا multi-select، در حالی که رفتارهایی مانند مرتب‌سازی، جستجو، متن پیش‌فرض و امکان افزودن گزینه‌های سفارشی را کنترل کنند. توسعه‌دهندگان می‌توانند استایل‌های المنت‌های select را مطابق با طراحی اپلیکیشن خود سفارشی‌سازی نمایند. علاوه بر این، Choices.js توابع callback برای تعاملات کاربر دارد و ورودی‌های متنی را با ویژگی‌هایی مانند برچسب‌گذاری، اعتبارسنجی و محدود کردن ورودی‌ها گسترش می‌دهد.

مزایای Choices.js

  • حجم bundle حدود ۲۰ کیلوبایت gzipped است که آن را برای پروژه‌های حساس به عملکرد مناسب می‌کند.
  • استفاده از آن آسان می‌باشد؛ این کتابخانه API ساده‌ای برای ادغام و سفارشی‌سازی سریع فراهم می‌کند.
  • بسیار قابل تنظیم است؛ به توسعه‌دهندگان این امکان را می‌دهد تا تقریباً هر جنبه‌ای، از جمله استایل‌ها و رفتارها، را مطابق نظر خود تنظیم نمایند.
  • از شیوه‌های مدرن جاوااسکریپت پیروی می‌کند و به خوبی با فریم‌ورک‌های React یا Vue و حتی Laravel ادغام می‌شود.

معایب Choices.js

  • پشتیبانی از AJAX به طور پیش‌فرض وجود ندارد و نیاز به کار اضافی برای بارگذاری داده‌های داینامیک دارد.
  • مستندات و پشتیبانی community نسبت به React Select محدودتر است.
  • ویژگی‌های پیشرفته کم‌تری به طور آماده ارائه می‌دهد.

نحوه استفاده از Choices.js

برای نصب 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 Mobile Picker جایگزینی مستقیم برای React Select نیست، اما یک کتابخانه سبک و ساده است که رابط کاربری قابل تنظیم و ساده‌ای را برای انتخاب آیتم‌ها از یک لیست ارائه می‌دهد. این کتابخانه برای اپلیکیشن‌هایی مناسب است که کاربران باید از میان گزینه‌هایی مثل تاریخ، زمان، یا لیست‌های سفارشی انتخاب کنند. این کتابخانه از select boxهای سبک iOS الهام گرفته و تجربه کاربری زیبا و ساده‌ای برای انتخاب گزینه‌ها فراهم می‌کند.

مزایای React Mobile Picker

  • تجربه کاربری را در دستگاه‌های موبایل با یک رابط کاربری روان و جذاب بهبود می‌بخشد.
  • امکان سفارشی‌سازی Picker برای تطابق با طراحی و نیازهای عملکردی اپلیکیشن را فراهم می‌کند.
  • از انواع داده مختلف مثل تاریخ‌ها، زمان‌ها و غیره پشتیبانی می‌کند.
  • برای دستگاه‌های موبایل بهینه شده و تجربه کاربری یکپارچه‌ای را در اندازه‌ها و جهت‌های مختلف صفحه نمایش ارائه می‌دهد.
  • API و مستندات کافی برای ادغام ساده در کدهای موجود دارد.
  • مصرف منابع کمی دارد و با داده‌های بزرگ، عملکرد روانی ارائه می‌دهد.

معایب React Mobile Picker

  • اضافه کردن وابستگی‌های جدید ممکن است حجم پروژه را افزایش داده و بر عملکرد تأثیر بگذارد.
  • سفارشی‌سازی پیچیده نیاز به زمان و آشنایی با API کتابخانه دارد.
  • community و پشتیبانی محدودی دارد.

نحوه استفاده از React Mobile Picker

برای نصب این کتابخانه از دستور زیر استفاده می‌کنیم:

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

rc-select یک کتابخانه کامپوننت select برای اپلیکیشن‌های React است که حالت‌های مختلفی از جمله انتخاب تکی، چندگانه و تگ‌ها را ارائه می‌دهد. این کتابخانه با مرورگرهای مختلف مانند IE11+، Chrome، Firefox و Safari سازگار است و دسترس‌پذیری را برای همه کاربران تضمین می‌کند.

یکی از قابلیت‌های مهم rc-select، پشتیبانی از navigation با صفحه کلید است. کاربران می‌توانند با فوکوس یا کلیک روی فیلد ورودی، منوی انتخاب را باز کنند و از کلیدهایی مانند keyDown ،keyUp و enter برای حرکت در منو استفاده نمایند. این ویژگی‌ها باعث شده است تا این کتابخانه، انتخاب محبوبی برای ساخت فرم‌های پیشرفته در React باشد.

مزایای rc-select

  • گزینه‌های سفارشی‌سازی گسترده برای تطابق با طراحی اپلیکیشن دارد.
  • انیمیشن‌های روان و رندر سریع ارائه می‌دهد.
  • پشتیبانی از navigation با صفحه‌کلید و سازگاری با Screen Readerها را دارد.
  • شامل ویژگی‌های پیشرفته مانند گروه‌بندی، فیلتر کردن، مرتب‌سازی و رندرهای سفارشی می‌باشد.
  • پشتیبانی فعال از community و به‌روزرسانی‌های منظم را دارا می‌باشد.

معایب rc-select

  • منحنی یادگیری بالاتری نسبت به کامپوننت‌های ساده‌تر select دارد.
  • حجم زیاد bundle (38.6 کیلوبایت)، که ممکن است بر روی زمان بارگذاری تأثیر منفی بگذارد.

نحوه استفاده از rc-select

با استفاده از دستور زیر 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 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 ساده نیاز دارند، بدون پیچیدگی‌های کتابخانه‌های پیشرفته‌تر، ایده‌آل است و در عین حال عملکرد را در اولویت قرار می‌دهد.

مزایای React Dropdown Select

  • سبک بوده و برای ادغام آسان می‌باشد.
  • API ساده با ویژگی‌های دسترسی‌پذیری مناسب دارد.
  • برای موارد استفاده ساده به راحتی قابل سفارشی‌سازی است.

معایب React Dropdown Select

  • ویژگی‌های محدودی در مقایسه با کتابخانه‌های پیچیده‌تری مثل React Select دارد.
  • فاقد امکانات پیشرفته‌ای است که برای اپلیکیشن‌های پیچیده مورد نیاز است.

نحوه استفاده از React Dropdown Select

برای نصب کتابخانه از دستور زیر استفاده می‌کنیم:

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 UI (مانند  Mantine، Radix UI، MUI Select)

برخی از کتابخانه‌ها، کامپوننت‌های headless select ارائه می‌دهند. این کامپوننت‌ها بدون اینکه استایل‌های خاصی را اعمال کنند، بر روی منطق و رفتار تمرکز دارند. به همین دلیل، برای ادغام در سیستم‌های طراحی موجود مناسب هستند. از گزینه‌های محبوب می‌توانیم به Mantine، Radix UI و MUI Select (که بخشی از Material-UI است) اشاره کنیم.

Mantine

Mantine یک کتابخانه کامل است که علاوه بر کامپوننت‌های headless، گزینه‌های از پیش استایل شده را نیز ارائه می‌دهد. این کتابخانه شامل کامپوننت‌های متنوعی است و سطح بالایی از قابلیت سفارشی‌سازی را فراهم می‌کند.

Radix UI

Radix UI کامپوننت‌های headless با تمرکز بر دسترس‌پذیری و طراحی بدون استایل ارائه می‌دهد، به طوری که توسعه‌دهندگان می‌توانند آن‌ها را به دلخواه سفارشی کنند.

MUI Select

MUI Select بخشی از کتابخانه Material-UI در React است و یک کامپوننت select داخلی ارائه می‌دهد که اصول طراحی متریال گوگل را دنبال می‌کند.

این کامپوننت‌های headless select به ما این امکان را می‌دهند که رابط‌های کاربری مدرن و شیک بسازیم و کنترل کاملی روی ظاهر آن‌ها داشته باشیم.

مزایا

  • انعطاف‌پذیر بوده و به راحتی قابل ادغام در هر سیستم طراحی می‌باشند.
  • منطق کامپوننت را بدون اعمال استایل‌های پیش‌فرض، مدیریت می‌کنند.
  • کاملاً دسترس‌پذیر بوده، به خوبی نگه‌داری می‌شوند و دارای community گسترده هستند.

معایب

  • استایل‌دهی این کامپوننت‌ها نسبت به کتابخانه‌های از پیش استایل شده، زمان و تلاش بیشتری نیاز دارد.
  • ممکن است برای پروژه‌های ساده که نیاز به سفارشی‌سازی زیادی ندارند، پیچیده به نظر برسند.

جمع‌بندی

در این مقاله، برخی از بهترین کتابخانه‌های کامپوننت select برای React را بررسی کردیم، از جمله React Select و جایگزین‌های آن مثل Downshift، Choices.js، React Mobile Picker، rc-select و کتابخانه‌های Headless UI مانند Mantine و Radix UI. این کتابخانه‌ها بسته به نیاز پروژه، امکانات و انعطاف‌پذیری‌های متنوعی را ارائه می‌دهند.

دیدگاه‌ها:

افزودن دیدگاه جدید