React – це широко відома JavaScript-бібліотека для створення інтерфейсів користувача. За допомогою React ви можете розробляти різноманітні веб-програми: від соціальних мереж і платформ електронної комерції до блогів, односторінкових застосунків, систем керування контентом (CMS), інформаційних панелей, візуалізацій даних та іншого.
Розробники можуть розширювати можливості своїх React-проектів, використовуючи різноманітні додаткові бібліотеки та фреймворки. Серед них особливе місце займають бібліотеки для реалізації функції перетягування (Drag-and-Drop).
Функція “перетягни та відпусти” є одним зі способів взаємодії користувача з інтерфейсом, коли користувач може натиснути на елемент, перемістити його в потрібне місце та відпустити. Класичним прикладом є зміна порядку елементів у списку шляхом їх перетягування.
Функціональність перетягування може бути корисною в різноманітних сценаріях:
- Завантаження файлів: користувачі можуть перетягувати файли замість того, щоб шукати їх на своєму комп’ютері за допомогою вікна вибору файлів.
- Дошки Kanban: створення інформаційної панелі, де користувачі можуть переміщувати елементи залежно від їхнього статусу або етапу виконання.
- Галереї зображень: користувачі можуть не тільки завантажувати, але і змінювати порядок фотографій, перетягуючи їх.
- Віджети: можливість персоналізувати інтерфейс програми, переставляючи віджети на екрані.
- Кошик для покупок: перетягування товарів безпосередньо в кошик для покупок.
Бібліотеки React Drag and Drop – це набори готових компонентів, що дозволяють розробникам легко впроваджувати функціонал перетягування у свої React-додатки.
Такі бібліотеки надають готові до використання компоненти, що робить створення елементів, які можна перетягувати, простим процесом. Вони автоматично обробляють події, такі як початок перетягування, переміщення елемента та його відпускання.
Переваги використання бібліотек Drag and Drop для покращення взаємодії з користувачем
- Покращена взаємодія з користувачем: перетягування є інтуїтивно зрозумілим способом взаємодії з програмою. Це робить інтерфейс більш інтерактивним і зручним.
- Спрощення робочих процесів: замість пошуку файлів у різних папках на комп’ютері, користувачі можуть просто перетягнути їх в додаток.
- Підвищення продуктивності: перетягування економить час, роблячи роботу з додатком більш ефективною.
- Оптимізація для мобільних пристроїв: для смартфонів і планшетів з обмеженим розміром екрана перетягування є чудовим способом взаємодії.
- Привабливий інтерфейс: анімації під час перетягування елементів можуть надати інтерфейсу додаткової візуальної привабливості.
Далі представлено огляд найкращих бібліотек Drag and Drop для React:
React DnD
React DnD – це набір інструментів для створення складних інтерфейсів перетягування. Ця бібліотека ідеально підходить для розробки таких програм, як Trello або Storify, де перетягування елементів передбачає передачу даних.
Встановлення:
npm install react-dnd react-dnd-html5-backend
Щоб використовувати React DnD у вашому React-компоненті, імпортуйте його таким чином:
import { useDrag } from 'react-dnd'
Основні характеристики:
- Інтеграція з існуючими компонентами: бібліотека не надає готових віджетів, але “обгортає” ваші компоненти, додаючи їм необхідні властивості для перетягування.
- Розширюваність: ви можете додати спеціальний механізм обробки подій миші або дотику, використовуючи React DnD.
- Можливість тестування: ви можете використовувати Jest або Enzyme для перевірки коду, що використовує React DnD.
- Підтримка сенсорного управління: React DnD підтримує сенсорні екрани.
React DnD є безкоштовною бібліотекою з відкритим вихідним кодом.
React Draggable
React Draggable – це проста та водночас потужна бібліотека, що дозволяє легко створювати елементи, які можна перетягувати.
Встановлення:
npm install react-draggable
Для використання React Draggable імпортуйте бібліотеку у ваш React-компонент таким чином:
import Draggable from 'react-draggable';
Особливості:
- Легкість встановлення та налаштування: для початку роботи достатньо встановити та імпортувати бібліотеку. Можна також імпортувати окремі компоненти з бібліотеки.
- Сумісність з Vanilla JavaScript і React: React Draggable можна використовувати зі звичайним JavaScript.
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Сумісність з іншими React-бібліотеками: React Draggable можна використовувати в поєднанні з такими бібліотеками, як React Grid Layout.
React Draggable – це безкоштовна бібліотека з відкритим вихідним кодом.
React Dropzone
React Dropzone – це простий React Hook для створення зони перетягування файлів, що використовує HTML5.
Встановлення:
npm install –save react-dropzone
або:
yarn add react-dropzone
Для імпорту бібліотеки використовуйте наступний код:
import {useDropzone} from 'react-dropzone';
Особливості:
- Гнучке стилізування: бібліотека не нав’язує стилів, дозволяючи вам налаштувати зовнішній вигляд компонента на власний розсуд.
- Можливість вибору типів файлів: ви можете обмежити типи файлів, які приймаються зоною перетягування.
- Спеціальна перевірка: ви можете задати власні правила перевірки файлів.
React Dropzone є безкоштовною бібліотекою з відкритим вихідним кодом.
React Grid Layout
React Grid Layout – це бібліотека для створення сітки з можливістю перетягування елементів та зміни їх розміру.
Встановлення:
npm install react-grid-layout
Для імпорту бібліотеки використовуйте наступний код:
import GridLayout from "react-grid-layout";
Особливості:
- Відсутність залежностей: React Grid Layout базується виключно на React і не залежить від JQuery.
- Віджети зі змінним розміром: крім перетягування, ви можете також змінювати розмір компонентів.
- Адаптивні точки перелому: бібліотека підтримує різні макети для різних розмірів екрана.
- Можливість налаштування: ви можете додавати або видаляти віджети, не перебудовуючи всю сітку.
React Grid Layout – це безкоштовна бібліотека з відкритим вихідним кодом.
React rnd
React rnd – це React-компонент, що дозволяє перетягувати та змінювати розмір елементів.
Встановлення:
npm i -S react-rnd
Або:
yarn add react-rnd
Особливості:
- Простота: React rnd є простим у використанні, але дуже потужним інструментом.
- Сумісність із TypeScript і JavaScript: ви можете використовувати React rnd у своїх проектах, незалежно від того, використовуєте ви JavaScript або TypeScript.
- Підтримка зміни розміру: ви можете легко змінювати розмір компонентів, створених за допомогою React rnd.
React rnd – це безкоштовна бібліотека з відкритим вихідним кодом.
React Virtualized dnd
React Virtualized dnd – це фреймворк React з підтримкою перетягування та вбудованими можливостями віртуалізації.
Встановлення:
npm install –save react-virtualized-dnd
Для імпорту бібліотеки використовуйте наступний код:
import ExampleBoard from 'react-virtualized-dnd';
Особливості:
- Різноманітність компонентів: компоненти згруповані за типами: “Фіксована висота”, “Змінна висота” і “Груповане скидання”.
- Налаштування: ви можете налаштувати компоненти React Virtualized dnd під свої потреби.
React Virtualized dnd – це фреймворк з відкритим вихідним кодом, розміщений на GitHub.
React Movable
React Movable – це бібліотека для створення списків і таблиць, які можна перетягувати.
Встановлення:
yarn add react-movable
Для імпорту бібліотеки використовуйте наступний код:
import { List, arrayMove } from 'react-movable';
Особливості:
- Різноманітні варіанти перетягування та скидання: бібліотека надає готові приклади коду для різних типів компонентів.
- Легка бібліотека: React Movable не має залежностей і має малий розмір (менше 4 Кб в стиснутому вигляді).
- Гнучке стилізування: бібліотека не обмежує вас у виборі стилів для вашого додатку.
- Підтримка сенсорного управління: React Movable дозволяє створювати додатки, які можна використовувати на смартфонах, планшетах та інших пристроях із сенсорним екраном.
- Написано на TypeScript: ви можете використовувати типізацію у своєму коді.
React Movable – це безкоштовна бібліотека з відкритим вихідним кодом.
Draggable
Draggable – це бібліотека для React, що абстрагує низькорівневі події браузера та надає розширений API для створення подій перетягування.
Встановлення:
npm install @shopify/draggable –save
або через yarn:
yarn add @shopify/draggable
Для імпорту бібліотеки використовуйте наступний код:
import { Draggable } from '@shopify/draggable';
Особливості:
- Категоризовані компоненти: ви легко знайдете необхідний компонент завдяки їхній класифікації. Компоненти можна налаштовувати.
- Сумісність з основними браузерами: Draggable підтримує Google Chrome, Mozilla Firefox і Apple Safari.
- Підтримка TypeScript: ви можете використовувати Draggable з кодом TypeScript.
- Підтримка плагінів: ви можете розширити функціональність Draggable за допомогою плагінів, таких як Collidable і SwapAnimation.
Draggable – це безкоштовна бібліотека з відкритим вихідним кодом, що підтримується спільнотою.
React Перетягніть, щоб вибрати
React drag-to-select – це бібліотека для додавання функції вибору шляхом перетягування до вашого додатка.
Встановлення:
npm install –save @air/react-drag-to-select
Або:
yarn add @air/react-drag-to-select
Для імпорту бібліотеки використовуйте наступний код:
import { useSelectionContainer } from '@air/react-drag-to-select'
Особливості:
- Простота: бібліотека не виконує вибір елементів, а лише малює рамку вибору та надає вам її координати.
- Підтримка TypeScript: бібліотека React Drag-to-select написана на TypeScript, що дозволяє використовувати її з проектами на TypeScript і JavaScript.
- Підтримка тестування: ви можете використовувати цю бібліотеку з різними фреймворками тестування React.
React Drag-to-select – це безкоштовна бібліотека з відкритим вихідним кодом.
React Dragula
React Dragula – це проста бібліотека для створення перетягуваних елементів у React.
Встановлення:
npm install react-dragula –save
Або:
bower install react-dragula –save
Особливості:
- Можливість налаштування: ви можете налаштувати компоненти React Dragula під свої потреби.
- Підтримка сенсорного управління: ви можете використовувати цю бібліотеку для створення додатків, які можна використовувати на смартфонах, планшетах та інших сенсорних пристроях.
- Легкість: React Dragula має малий розмір, що робить її ідеальним вибором, якщо ви хочете мінімізувати розмір вашого React-додатку.
React Dragula – це безкоштовна бібліотека з відкритим вихідним кодом.
Висновок
Тепер ви знайомі з різними бібліотеками Drag-and-Drop, які можете використовувати у своєму наступному React-проекті. Вибір бібліотеки залежить від конкретних функцій вашого додатка, а також від ваших особистих вподобань.
Якщо ваш додаток великий і складний, ви можете використовувати декілька бібліотек перетягування, щоб задовольнити різні потреби. Більшість з цих бібліотек сумісні з різними фреймворками тестування React, що дозволяє розробляти додатки без помилок.