React är ett välkänt JavaScript-bibliotek som fokuserar på att bygga användargränssnitt (UI). Med React kan man utveckla en bred variation av webbapplikationer, inklusive sociala medieplattformar, e-handelssidor, bloggar, enkelspappsapplikationer, innehållshanteringssystem (CMS), instrumentpaneler och datavisualiseringar, för att nämna några exempel.
Utvecklare kan utöka funktionerna i React-applikationer genom att använda olika bibliotek och ramverk. Dessa bibliotek kan delas in i flera kategorier, och ”dra-och-släpp” är en mycket populär sådan.
Dra-och-släpp-funktionalitet är en typ av gränssnittsinteraktion som låter en användare klicka på/välja ett element på skärmen, dra det och sedan placera det på en annan del av gränssnittet. Ett tydligt exempel på detta är att omorganisera objekt i en lista genom att flytta dem till önskad position med dra-och-släpp.
Du kan även använda dra-och-släpp-funktionen i följande situationer:
- Filuppladdning: Användare kan enkelt ladda upp filer genom att dra dem till gränssnittet istället för att leta efter dem i sin dator.
- Kanban-tavlor: Skapa instrumentpaneler där användare kan flytta objekt baserat på deras aktivitet eller stadie.
- Bildgallerier: Möjliggör för användare att ladda upp och sortera om bilder genom att dra och släppa.
- Widgets: Anpassa applikationens utseende genom att låta användare dra och släppa olika widgets.
- Kundvagnar: Användare kan lägga till varor i kundvagnen genom att helt enkelt dra dem dit.
Ett React-bibliotek för dra-och-släpp är en samling av färdiga komponenter som underlättar för utvecklare att implementera dra-och-släpp-funktionalitet i sina React-applikationer.
Dessa bibliotek inkluderar återanvändbara komponenter som gör det möjligt för utvecklare att skapa element som kan flyttas med dra-och-släpp. Biblioteken hanterar också de olika händelser som uppstår under drag-processen, som drag start, drag enter, drag leave och drop.
Hur dra-och-släpp-bibliotek förbättrar UI-interaktioner
- Förbättrad användarupplevelse: Dra-och-släpp är ett intuitivt sätt för användare att interagera med en applikation. Att dra objekt istället för att skriva in information manuellt ger en smidig och interaktiv upplevelse.
- Förenklade arbetsflöden: Istället för att leta efter filer på olika platser i datorn kan användare enkelt dra och släppa dem in i applikationen.
- Ökad produktivitet: Dra-och-släpp-funktioner sparar tid, vilket i sin tur ökar användarnas produktivitet.
- Lämpligt för mobila enheter: Mobila enheter har begränsat skärmutrymme och användare navigerar främst med hjälp av gester. Dra-och-släpp är därför ett värdefullt tillägg för mobila gränssnitt.
- Skapar engagerande gränssnitt: Dra-och-släpp-funktioner kan ge ett mer visuellt tilltalande gränssnitt. Animationer kan läggas till för att ge användaren feedback när objekt dras och släpps.
Här följer en sammanställning av de bästa dra-och-släpp-biblioteken för React:
React DnD
React DnD är en uppsättning verktyg för React som är utformade för att bygga avancerade dra-och-släpp-gränssnitt. Detta bibliotek är idealiskt för att skapa applikationer som liknar Trello och Storify, där dra-och-släpp även innefattar dataöverföring.
Installation:
npm installera react-dnd react-dnd-html5-backend
För att använda React DnD i din React-komponent importerar du det på följande sätt:
import { useDrag } from 'react-dnd'
Huvudfunktioner:
- Fungerar med dina komponenter: Biblioteket levererar inte färdiga widgets, men omsluter dina komponenter och tillför extra egenskaper till dem.
- Utökningsbart: React DnD möjliggör anpassning av backend-funktionalitet baserad på mus- eller beröringshändelser.
- Testbart: Du kan använda testverktyg som Jest eller Enzyme för att testa React DnD-kod.
- Touch-stöd: Med React DnDs touch-backend kan du lägga till stöd för touch-interaktioner.
React DnD är ett kostnadsfritt bibliotek med öppen källkod.
React Draggable
React Draggable är ett enkelt men kraftfullt React-bibliotek som underlättar skapandet av dragbara element.
Installation:
npm installera react-draggable
För att använda React Draggable importerar du det på följande sätt i din React-komponent:
import Draggable from 'react-draggable';
Funktioner:
- Enkel installation och konfigurering: Installation och import av biblioteket är allt som krävs för att komma igång. Enskilda komponenter kan också importeras.
- Kompatibelt med ren JavaScript och React: React Draggable kan användas med ren JavaScript på följande sätt:
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Kompatibelt med andra React-bibliotek: React Draggable fungerar bra med andra bibliotek som React Grid Layout.
React Draggable är ett gratis dra-och-släpp-bibliotek med öppen källkod för React.
React Dropzone
React Dropzone är en enkel React-hook för att skapa en HTML5-kompatibel dra-och-släpp-zon för filer.
Installation:
npm install –save react-dropzone
eller:
yarn add react-dropzone
Du kan sedan importera biblioteket så här:
import {useDropzone} from 'react-dropzone';
Funktioner:
- Styla Dropzone: Biblioteket har inga fördefinierade stilar, vilket ger dig frihet att anpassa utseendet på komponenterna.
- Tillåter användare att definiera acceptabla filtyper: Du kan ange vilka filtyper som ska accepteras eller avvisas med hjälp av egenskapen ”accept”.
- Accepterar anpassad validering: Med egenskapen ”validator” kan du ange anpassade valideringsregler för olika filer.
React Dropzone är ett gratis dra-och-släpp-bibliotek med öppen källkod för React.
React Grid Layout
React Grid Layout är ett bibliotek för skapande av flexibla och dragbara rutnätlayouter för React.
Installation:
npm installera react-grid-layout
Biblioteket importeras på följande vis:
import GridLayout from "react-grid-layout";
Funktioner:
- Oberoende av beroenden: React Grid Layout är byggt enbart med React och är inte beroende av JQuery.
- Ändra storlek på widgets: Utöver dra-och-släpp kan du även ändra storlek på komponenterna.
- Responsiva brytpunkter: Biblioteket erbjuder separata layouter för varje brytpunkt.
- Anpassningsbart: Du kan lägga till eller ta bort widgets utan att bygga om hela rutnätet.
React Grid Layout är ett kostnadsfritt React-bibliotek med öppen källkod.
React rnd
React rnd är en komponent för React som kan dras och storleksändras.
Installation:
npm i -S react-rnd
Eller
yarn add react-rnd
Funktioner:
- Enkelt: React rnd är designat för att vara enkelt att använda men samtidigt kraftfullt.
- Kompatibelt med TypeScript och JavaScript: Oavsett om din applikation är skriven i JavaScript eller TypeScript kan React rnd användas.
- Stöd för storleksändring: Det är enkelt att ändra storlek på komponenter som skapats med React rnd.
React rnd är ett gratis React-bibliotek med öppen källkod.
React Virtualized dnd
React Virtualized dnd är ett dra-och-släpp-ramverk för React med inbyggda virtualiserande rullningslister.
Installation:
npm install –save react-virtualized-dnd
React Virtualized dnd kan importeras på följande sätt:
import ExampleBoard from 'react-virtualized-dnd';
Funktioner:
- Olika komponenter att välja mellan: Komponenterna är indelade i ”Fixed Height”, ”Variable Height” och ”Groupable Dropables”.
- Anpassningsbart: Du kan anpassa komponenterna från React Virtualized dnd för att passa dina behov.
React Virtualized dnd är ett React-ramverk med öppen källkod och finns på GitHub.
React Movable
React Movable är ett dra-och-släpp-bibliotek för React som är avsett för listor och tabeller.
Installation:
yarn add react-movable
Biblioteket kan importeras på följande sätt:
import { List, arrayMove } from 'react-movable';
Funktioner:
- Flera dra-och-släpp-alternativ: Biblioteket har standardkoder för olika typer av dra-och-släpp-komponenter.
- Lättviktsbibliotek: React Movable har inga beroenden till JQuery och är mindre än 4kB (gzippat).
- Minimal styling: React Movable dikterar inte hur du ska styla din applikation.
- Touch-stöd: Biblioteket underlättar skapandet av appar som fungerar på smartphones, surfplattor och andra enheter med pekskärm.
- Skrivet i TypeScript: Biblioteket är skrivet i TypeScript vilket innebär att du kan dra nytta av typkontroll.
React Movable är ett gratis React-bibliotek med öppen källkod.
Draggable
Draggable är ett dra-och-släpp-bibliotek för React som låter utvecklare skapa dra-och-släpp-interaktioner genom att abstrahera webbläsarhändelser till ett omfattande API.
Installation:
npm installera @shopify/draggable –save
eller via yarn:
yarn add @shopify/draggable
Du kan importera Draggable i din React-app på detta sätt:
import { Draggable } from '@shopify/draggable';
Funktioner:
- Kategoriserade komponenter: Komponenterna är ordnade i kategorier vilket gör det enkelt att hitta det du söker. Komponenterna är också anpassningsbara.
- Kompatibelt med de flesta webbläsare: Draggable kan användas med webbläsare som Google Chrome, Mozilla Firefox och Apple Safari.
- Stöd för TypeScript: Du kan lägga till TypeScript-definitioner i din kod när du arbetar med detta bibliotek.
- Stöd för plugins: Draggables funktionalitet kan utökas med plugins som Collidable och SwapAnimation.
Draggable är ett gratis React-bibliotek med öppen källkod som underhålls av bidragsgivare.
React Drag to Select
React drag-to-select är ett React-bibliotek som kan användas för att lägga till dra-för-att-välja-funktioner i din applikation.
Installation:
npm install –save @air/react-drag-to-select
Eller
yarn add @air/react-drag-to-select
Du kan importera biblioteket i din applikation på följande vis:
import { useSelectionContainer } from '@air/react-drag-to-select'
Funktioner:
- Enkelt: Biblioteket väljer inte objekt direkt. Istället ritar det urvalsrutan och ger dig dess koordinater.
- Stöd för TypeScript: React Drag-to-select-biblioteket är skrivet i TypeScript, vilket gör att det kan användas i React-applikationer som är skrivna i både TypeScript och JavaScript.
- Stöd för testning: Biblioteket kan användas med de flesta testramverk för React.
React Drag-to-select är ett gratis bibliotek med öppen källkod.
React Dragula
React Dragula är ett enkelt dra-och-släpp-bibliotek för React.
Installation:
npm installera react-dragula –save
Eller,
bower installera react-dragula –save
Funktioner:
- Anpassningsbart: Du kan anpassa komponenterna från React Dragula för att passa dina behov.
- Stöd för touch: Du kan använda biblioteket för att skapa applikationer som fungerar på smartphones, surfplattor och andra pekskärmar.
- Lättvikt: React Dragula har en liten paketeringsstorlek, vilket är idealiskt om du vill att din React-applikation ska vara så liten som möjligt.
React Dragula är ett gratis bibliotek med öppen källkod.
Slutsats
Nu har du en mängd olika dra-och-släpp-bibliotek att välja mellan för din nästa React-applikation. Valet av bibliotek beror på vilka funktioner du vill implementera, personliga preferenser och applikationens specifika behov.
I större applikationer kan flera dra-och-släpp-bibliotek användas för att hantera olika behov. De flesta biblioteken är kompatibla med olika testramverk för React, vilket underlättar skapandet av applikationer av hög kvalitet.