10 bästa dra-och-släpp-reaktionsbibliotek för enkel UI-interaktion

By rik

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.