React je poznata JavaScript biblioteka za izradu korisničkih interfejsa (UI). Koristeći React, možete kreirati različite tipove veb aplikacija, od društvenih mreža, platformi za e-trgovinu i blogova, do jednostraničnih aplikacija, sistema za upravljanje sadržajem (CMS), kontrolnih tabli i vizualizacija podataka, i to je samo deo mogućnosti.
Programeri mogu proširiti funkcionalnost React aplikacija koristeći razne biblioteke i okvire. Ove biblioteke se mogu grupisati u različite kategorije, a Drag-and-Drop je jedna od popularnijih.
Funkcija „prevuci i ispusti“ (Drag and Drop) omogućava korisniku da klikne ili izabere element na ekranu, zatim ga prevuče i ispusti na drugu komponentu. Tipičan primer je preuređivanje stavki na listi prevlačenjem i postavljanjem na željenu poziciju.
Takođe, funkciju prevlačenja i ispuštanja možete koristiti u sledećim situacijama:
- Otpremanje datoteka: Korisnici mogu prevlačiti i ispuštati datoteke umesto da pretražuju svoj uređaj da bi ih izabrali i otpremili.
- Kanban table: Možete kreirati kontrolnu tablu na kojoj korisnici mogu prevlačiti i ispuštati stavke, u zavisnosti od nivoa aktivnosti ili faze.
- Galerije slika: Omogućite korisnicima da otpremaju i preuređuju slike u galeriji.
- Vidžeti: Korisnici mogu personalizovati izgled aplikacije prevlačenjem i ispuštanjem vidžeta.
- Korpa za kupovinu: Korisnici mogu kliknuti na artikal, prevući ga i ispustiti u korpu za kupovinu.
React biblioteke za Drag and Drop su skup gotovih komponenti koje omogućavaju programerima da lako implementiraju ovu funkciju u React aplikacijama.
Ove biblioteke dolaze sa komponentama za višekratnu upotrebu, što developerima olakšava kreiranje elemenata koji se mogu prevlačiti i ispuštati. Biblioteke obrađuju različite događaje kao što su početak prevlačenja, ulazak u zonu ispuštanja, izlazak iz zone ispuštanja i samo ispuštanje.
Kako biblioteke za „prevuci i ispusti“ doprinose boljim UI interakcijama?
- Poboljšano korisničko iskustvo: Funkcija prevlačenja i ispuštanja je intuitivan način interakcije korisnika sa aplikacijom. Umesto ručnog unosa, prevlačenje i ispuštanje omogućava interaktivnu i besprekornu interakciju.
- Pojednostavljeni procesi: Umesto da otpremate datoteke sa različitih lokacija na vašem računaru u aplikaciju, možete ih jednostavno prevući i ispustiti.
- Povećana produktivnost: Funkcija prevlačenja i ispuštanja štedi vreme, čineći korisnike produktivnijim.
- Pogodno za mobilne uređaje: Mobilni uređaji kao što su pametni telefoni i tableti imaju ograničen prostor na ekranu. Korisnici se uglavnom oslanjaju na pokrete za navigaciju, što čini prevlačenje i ispuštanje odličnim dodatkom.
- Privlačni interfejsi: Funkcija prevlačenja i ispuštanja može dodati vizuelnu privlačnost korisničkom interfejsu vaše aplikacije. Možete dodati animacije koje pružaju povratne informacije ili opisuju radnje dok korisnici prevlače i ispuštaju stavke u aplikaciji.
Ovo su neke od najboljih Drag and Drop React biblioteka:
React DnD
React DnD je skup React alatki za izgradnju složenih interfejsa za prevlačenje i ispuštanje. Ova biblioteka je savršena za kreiranje aplikacija sličnih Trello-u ili Storyfire-u, gde funkcija prevlačenja i ispuštanja uključuje i prenos podataka.
Instalacija:
npm install react-dnd react-dnd-html5-backend
React DnD možete uvesti u svoju React komponentu na sledeći način:
import { useDrag } from 'react-dnd'Ključne karakteristike:
- Radi sa vašim komponentama: Ova biblioteka ne pruža gotove vidžete. Umesto toga, ona obavija vaše komponente i ubacuje im dodatne rekvizite.
- Proširiva: Možete dodati prilagođenu pozadinu na osnovu događaja miša ili dodirnih događaja kada koristite React DnD biblioteku.
- Testabilna: Za testiranje React DnD koda možete koristiti Jest ili Enzyme.
- Podrška za dodir: React DnD touch backend dodaje podršku za dodir ovoj biblioteci.
React DnD je besplatna biblioteka otvorenog koda.
React Draggable
React Draggable je jednostavna, ali moćna React biblioteka koja olakšava kreiranje elemenata koji se mogu prevlačiti.
Instalacija:
npm install react-draggable
Da biste koristili React Draggable, uvezite ga u React komponentu na sledeći način:
import Draggable from 'react-draggable';Karakteristike:
- Laka instalacija i konfiguracija: Potrebno je samo da instalirate i uvezete biblioteku da biste počeli. Takođe možete uvesti pojedinačne komponente iz biblioteke.
- Kompatibilna sa vanilla JavaScriptom i Reactom: React Draggable možete koristiti sa običnim JavaScriptom na sledeći način:
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;- Kompatibilna sa drugim React bibliotekama: React Draggable možete koristiti sa drugim bibliotekama, kao što je React Grid Layout.
React Draggable je besplatna Drag and Drop React biblioteka otvorenog koda.
React Dropzone
React Dropzone je jednostavan React Hook za kreiranje HTML5 kompatibilne zone za prevlačenje i ispuštanje datoteka.
Instalacija:
npm install --save react-dropzone
ili:
yarn add react-dropzone
Zatim možete uvesti ovu biblioteku na sledeći način:
import {useDropzone} from 'react-dropzone';Karakteristike:
- Stilizovanje Dropzone: Ova biblioteka ne postavlja nikakva pravila stilizovanja, tako da možete stilizovati svoje komponente kako želite.
- Omogućava korisnicima da definišu prihvatljive tipove datoteka: Možete definisati da Dropzone prihvata ili odbija određene tipove datoteka tako što ćete obezbediti svojstvo
accept. - Prihvata prilagođenu validaciju: Funkcija validatora omogućava vam da definišete prilagođenu validaciju za različite datoteke.
React Dropzone je besplatna React biblioteka otvorenog koda za Drag and Drop.
React Grid Layout
React Grid Layout je biblioteka za kreiranje rasporeda mreže u Reactu, uz mogućnost promene veličine i prevlačenja elemenata.
Instalacija:
npm install react-grid-layout
Ovu biblioteku možete uvesti na sledeći način:
import GridLayout from "react-grid-layout";Karakteristike:
- Bez zavisnosti: React Grid Layout je izgrađen isključivo na Reactu i ne sadrži jQuery.
- Vidžeti promenljive veličine: Pored funkcije prevlačenja i ispuštanja, možete i menjati veličinu komponenti.
- Tačke prekida: Biblioteka pruža poseban izgled za svaku tačku prekida (breakpoint).
- Prilagodljiv: Možete dodavati ili uklanjati vidžete bez potrebe za ponovnom izgradnjom cele mreže.
React Grid Layout je besplatna React biblioteka otvorenog koda.
React rnd
React rnd je komponenta za React koja omogućava i prevlačenje i promenu veličine elemenata.
Instalacija:
npm i -S react-rnd
ili
yarn add react-rnd
Karakteristike:
- Jednostavna: React rnd je dizajniran da bude jednostavan, a istovremeno veoma moćan.
- Kompatibilna sa TypeScriptom i JavaScriptom: Možete koristiti React rnd u svojoj aplikaciji bez obzira da li je konfigurisan sa JavaScriptom ili TypeScriptom.
- Podržava promenu veličine: Možete lako menjati veličinu komponenti kreiranih pomoću React rnd-a kako bi odgovarale vašim potrebama.
React rnd je besplatna React biblioteka otvorenog koda.
React Virtualized dnd
React Virtualized dnd je framework za prevlačenje i ispuštanje u Reactu, koji ima ugrađenu podršku za virtuelizaciju.
Instalacija:
npm install --save react-virtualized-dnd
React Virtualized dnd možete uvesti na sledeći način:
import ExampleBoard from 'react-virtualized-dnd';Karakteristike:
- Različite komponente: Komponente su grupisane u „Fixed Height“, „Variable Height“ i „Groupable droppables“.
- Prilagodljiva: Možete prilagoditi komponente iz React Virtualized dnd da odgovaraju vašim specifičnim potrebama.
React Virtualized dnd je React framework otvorenog koda, čiji se izvorni kod nalazi na GitHubu.
React Movable
React Movable je biblioteka za prevlačenje i ispuštanje elemenata u Reactu, posebno korisna za liste i tabele.
Instalacija:
yarn add react-movable
Ovu biblioteku možete uvesti na sledeći način:
import { List, arrayMove } from 'react-movable';Karakteristike:
- Različite opcije za prevlačenje i ispuštanje: Biblioteka ima šablonske kodove za različite tipove komponenti koje se mogu prevlačiti i ispuštati.
- Lagana biblioteka: React Movable nema zavisnosti kao što je jQuery. Manja je od 4KB (gzipovana).
- Ne nametljiv stil: React Movable ne kontroliše način na koji želite da stilizujete svoju aplikaciju.
- Podrška za dodir: Ova biblioteka pomaže u kreiranju aplikacija koje se mogu koristiti na pametnim telefonima, tabletima i drugim uređajima sa funkcijom dodira.
- Napisana u TypeScriptu: Možete koristiti tipove u svom kodu, što je funkcionalnost nedostupna u JavaScriptu.
React Movable je besplatna React biblioteka otvorenog koda.
Draggable
Draggable je biblioteka za prevlačenje i ispuštanje u Reactu, koja programerima omogućava kreiranje događaja prevlačenja i ispuštanja, apstrahujući izvorne događaje pretraživača u sveobuhvatan API.
Instalacija:
npm install @shopify/draggable --save
ili putem yarna:
yarn add @shopify/draggable
Možete uvesti Draggable u svoju React aplikaciju na sledeći način:
import { Draggable } from '@shopify/draggable';Karakteristike:
- Kategorizovane komponente: Pronalaženje odgovarajuće komponente je olakšano jer su one kategorizovane. Ove komponente su prilagodljive.
- Kompatibilna sa glavnim pretraživačima: Draggable možete koristiti sa pretraživačima kao što su Google Chrome, Mozilla Firefox i Apple Safari.
- Podržava TypeScript: Kada radite sa ovom bibliotekom, možete dodati TypeScript definicije svom kodu.
- Podržava dodatke: Možete proširiti funkcionalnosti Draggable-a pomoću dodataka kao što su Collidable i SwapAnimation.
Draggable je besplatna React biblioteka otvorenog koda, koju održava zajednica saradnika.
React Drag to Select
React drag-to-select je React biblioteka koju možete koristiti za dodavanje funkcionalnosti „prevuci-za-selektovanje“ u svoju aplikaciju.
Instalacija:
npm install --save @air/react-drag-to-select
ili
yarn add @air/react-drag-to-select
Ovu biblioteku možete uvesti u svoju aplikaciju na sledeći način:
import { useSelectionContainer } from '@air/react-drag-to-select'Karakteristike:
- Jednostavna: Ova biblioteka ne vrši odabir stavki. Umesto toga, ona crta okvir za selekciju i daje vam koordinate.
- Podržava TypeScript: React Drag-to-select je napisan u TypeScriptu, što znači da ga možete koristiti sa React aplikacijama napisanim u TypeScriptu i JavaScriptu.
- Podržava testiranje: Ovu biblioteku možete koristiti sa većinom React frameworka za testiranje.
React Drag-to-select je besplatna biblioteka otvorenog koda.
React Dragula
React Dragula je jednostavna React biblioteka za prevlačenje i ispuštanje.
Instalacija:
npm install react-dragula --save
ili
bower install react-dragula --save
Karakteristike:
- Prilagodljiva: Možete prilagoditi komponente iz React Dragula da odgovaraju vašim potrebama.
- Podržava dodir: Ovu biblioteku možete koristiti za kreiranje aplikacija koje se mogu koristiti na pametnim telefonima, tabletima i drugim uređajima osetljivim na dodir.
- Lagana: React Dragula ima malu veličinu paketa, što je čini savršenom ako želite da vaša React aplikacija bude mala.
React Dragula je besplatna biblioteka otvorenog koda.
Zaključak
Sada imate širok spektar biblioteka za prevlačenje i ispuštanje koje možete koristiti u vašoj sledećoj React aplikaciji. Izbor biblioteke zavisiće od funkcija koje želite da uključite, vaših ličnih preferencija i ukusa.
Ako je vaša aplikacija velika, možete koristiti više biblioteka za prevlačenje i ispuštanje da biste zadovoljili različite potrebe. Većina ovih biblioteka je kompatibilna sa raznim React bibliotekama za testiranje, što olakšava isporuku aplikacija bez grešaka.