10 beste dra-og-slipp-reager-biblioteker for uanstrengt UI-interaksjoner

0 Shares

React er et kjent JavaScript-bibliotek for brukergrensesnitt (UI). Du kan bruke React-biblioteket til å lage forskjellige typer nettapper, alt fra apper for sosiale medier, e-handelsplattformer, blogger, enkeltsideapplikasjoner, innholdsstyringssystemer (CMS), Dashboards og datavisualiseringer, for å nevne noen.

Utviklere kan utvide funksjonaliteten til React-apper ved å bruke ulike biblioteker og rammeverk. Slike biblioteker kan grupperes i forskjellige klasser; Dra-og-slipp er en bibliotekkategori som er ganske populær.

Dra og slipp-funksjonalitet er en UI-interaksjon som lar en bruker klikke/velge et element på skjermen, dra det og slippe det på en annen komponent. Et perfekt eksempel på denne funksjonaliteten er å omorganisere elementer i en liste ved å dra og slippe elementer til ønsket plassering.

Du kan også bruke dra-og-slipp-funksjonalitet i følgende tilfeller;

Filopplasting: Brukere kan dra og slippe filer i stedet for å bla gjennom maskinene sine for å velge og laste opp filer.
Kanban-tavler: Du kan lage et dashbord der brukere kan dra og slippe elementer avhengig av aktivitetsnivåer eller stadier.
Bildegallerier: Du kan ha et bildegalleri der brukere kan laste opp og omorganisere bilder.
Widgets: Brukere kan tilpasse appens utseende ved å dra og slippe widgets.
Handlekurv: Brukere kan klikke på en vare, dra den og slippe den i handlekurven.

Et React Drag and Drop-bibliotek er et sett med forhåndsbygde komponenter som lar utviklere implementere Drag and Drop-funksjonalitet i React-applikasjoner.

Disse bibliotekene kommer med gjenbrukbare komponenter, slik at utviklere kan lage elementer som kan dras og slippes. Bibliotekene håndterer forskjellige hendelser som dra start, dra inn, dra forlate og slipp.

Innholdsfortegnelse

Hvordan dra og slipp-biblioteker vil hjelpe til med bedre UI-interaksjoner

Forbedret brukeropplevelse: Dra-og-slipp-funksjonaliteten er en intuitiv tilnærming for brukere å samhandle med en applikasjon. Muligheten for å dra og slippe elementer i stedet for å legge dem inn manuelt gir en interaktiv og sømløs interaksjon.
Forenklede arbeidsflyter: I stedet for å laste opp filer fra forskjellige steder på datamaskinen til et program, kan du ganske enkelt dra og slippe dem.
Økt produktivitet: Dra-og-slipp-funksjonalitet sparer tid, noe som gjør brukerne mer produktive.
Egnet for mobile enheter: Mobile enheter som smarttelefoner og nettbrett har begrenset skjermplass. Brukere stoler stort sett på bevegelser for navigering, noe som gjør dra-og-slipp til et fantastisk tillegg.
Gir engasjerende grensesnitt: Dra-og-slipp-funksjonalitet kan legge til visuell appell til appens brukergrensesnitt. Du kan legge til animasjoner som gir tilbakemelding eller beskriver handlinger når brukere drar og slipper elementer på appen.

6 beste proxy-administratorer for å administrere fullmakter i stor skala

Dette er de beste Drag and Drop React-bibliotekene:

Reager DnD

React DnD er et sett med React-verktøy for å bygge komplekse dra-og-slipp-grensesnitt. Dette biblioteket er perfekt for å lage apper som ligner på Trello og Storify, der dra-og-slipp-funksjonalitet også involverer dataoverføring.

Installasjon;

npm installer react-dnd react-dnd-html5-backend

Du kan importere React DnD til din React-komponent som;

import { useDrag } from 'react-dnd'

Nøkkelegenskaper

Fungerer med komponentene dine: Dette biblioteket gir ikke ferdige widgets. Imidlertid pakker den inn komponentene dine og injiserer rekvisitter i dem.
Utvidbar: Du kan legge til en tilpasset backend basert på musehendelser eller berøringshendelser når du bruker React DnD-bibliotek.
Testbar: Du kan bruke Jest eller Enzyme for å teste React DnD-kode.
Touch-støtte: React DnD touch-backend legger til berøringsfunksjonalitet til dette biblioteket.

React DnD er et gratis bibliotek med åpen kildekode.

Reager Dragable

React Draggable er et enkelt, men kraftig React-bibliotek som gjør det enkelt å lage dragbare elementer.

Installasjon;

npm installer som kan reageres og dras

For å bruke React Draggable, importer som følger på React-komponenten din.

import Draggable from 'react-draggable';

Egenskaper

Enkel å installere og konfigurere: Du trenger bare å installere og importere biblioteket for å komme i gang. Du kan også importere individuelle komponenter fra biblioteket.
Kompatibel med vanilla JavaScript og React: Du kan bruke React Draggable med vanlig JavaScript som følger;

let Draggable = require('react-draggable');

let DraggableCore = Draggable.DraggableCore;

Kompatibel med andre React-biblioteker: Du kan bruke React Draggable med andre biblioteker, for eksempel React Grid Layout.

React Draggable er et gratis, åpen kildekode Drap and Drop React-bibliotek.

Reager Dropzone

React Dropzone er en enkel React Hook for å lage en HTML-5-kompatibel dra-og-slipp-sone for filer.

Installasjon;

npm install –save react-dropzone

eller:

garn tilsett react-dropzone

Du kan deretter importere dette biblioteket som følger;

import {useDropzone} from 'react-dropzone';

Egenskaper

Styling Dropzone: Dette biblioteket setter ingen stylingregler, og du kan dermed style komponentene dine slik du vil.
Lar brukere definere akseptable filtyper: Du kan instruere Dropzone til å godta eller avvise visse filtyper ved å gi akseptprop.
Aksepterer tilpasset validering: Validator-propen lar deg spesifisere tilpasset validering for forskjellige filer.

9 populære nettapplikasjonsinjeksjonsangrepstyper

React Dropzone er et gratis Drag and Drop React-bibliotek med åpen kildekode.

React Grid Layout

React Grid Layout er et rutenettoppsett som kan endres og dras for React.

Installasjon;

npm installer react-grid-layout

Du kan importere dette biblioteket som følger;

import GridLayout from "react-grid-layout";

Egenskaper

Avhengighetsfri: React Grid Layout er bygget utelukkende på React og er fri for JQuery.
Tilpassbare widgeter: I tillegg til dra-og-slipp-funksjonen kan du også endre størrelsen på komponentene.
Responsive bruddpunkter: Biblioteket har en egen layout for hvert bruddpunkt.
Tilpassbar: Du kan legge til eller fjerne widgets uten å gjenoppbygge hele rutenettet.

React Grid Layout er et gratis, åpen kildekode React-bibliotek.

Reager rnd

React rnd er en komponent som kan dras og endres størrelse for React.

Installasjon;

npm i -S react-rnd

Eller

garn legge reager-rnd

Egenskaper

Enkelt: React rnd er designet for å være enkelt, men veldig kraftig.
Kompatibel med både TypeScript og JavaScript: Du kan bruke React rnd med appen din uavhengig av om du har konfigurert den med JavaScript eller TypeScript.
Støtter endring av størrelse: Du kan enkelt endre størrelse på komponenter opprettet ved hjelp av React rnd for å passe dine behov.

React rnd er et gratis, åpen kildekode React-bibliotek.

Reager Virtualisert dnd

React Virtualized dnd er et dra-og-slipp React-rammeverk som har innebygde virtualiserende rullefelt.

Installasjon;

npm install –save react-virtualized-dnd

Du kan importere React Virtualized dnd som;

import ExampleBoard from 'react-virtualized-dnd';

Egenskaper

En rekke komponenter å velge mellom: Komponentene er gruppert i «Fast høyde», «Variabel høyde» og «Grupperbare droppbare».
Tilpassbar: Du kan tilpasse komponentene fra React Virtualized dnd for å passe dine behov.

React Virtualized dnd er et åpen kildekode React-rammeverk hvis kildekode er vert på GitHub.

Reager Bevegelig

React Movable er et dra-og-slipp React-bibliotek for lister og tabeller.

Installasjon;

garn legge reagere-bevegelig

Du kan importere dette biblioteket som;

import { List, arrayMove } from 'react-movable';

Egenskaper

Ulike dra-og-slipp-alternativer å velge mellom: Biblioteket har standardkoder for ulike typer dra-og-slipp-komponenter å velge mellom.
Lettvektsbibliotek: React Movable har ikke avhengigheter som JQuery. Den er mindre enn 4kB (gzipped).
Upålitelig styling: React Movable styrer ikke hvordan du kanskje vil style appen din.
Berøringsstøtte: Dette biblioteket hjelper til med å lage apper som kan brukes på smarttelefoner, nettbrett og alle enheter med berøringsfunksjonalitet.
Skrevet i TypeScript: Du kan introdusere Types til koden din, en funksjonalitet som ikke er tilgjengelig i JavaScript.

Hva skjer hvis du har glemt ditt Amazon-passord?

React Movable er et gratis, åpen kildekode React-bibliotek.

Dragbar

Draggable er et dra-og-slipp React-bibliotek som lar utviklere lage dra-og-slipp-hendelser ved å abstrahere native nettleserhendelser til et omfattende API.

Installasjon;

npm installer @shopify/draggable – lagre

eller via garn:

garn legg til @shopify/draggable

Du kan importere Draggable til React-appen din som;

import { Draggable } from '@shopify/draggable';

Egenskaper

Kategoriserte komponenter: Det er enkelt å finne den eksakte komponenten som skal brukes ettersom komponentene er kategorisert. Disse komponentene kan tilpasses.
Kompatibel med store nettlesere: Du kan bruke Draggable med nettlesere som Google Chrome, Mozilla Firefox og Apple Safari.
Støtter TypeScript: Når du arbeider med dette biblioteket, kan du legge til TypeScript-definisjoner i koden din.
Støtter plugins: Du kan legge til Draggables funksjonalitet med plugins som Collidable og SwapAnimation.

Draggable er et gratis, åpen kildekode React-bibliotek vedlikeholdt av bidragsytere.

Reager Dra for å velge

React drag-to-select er et React-bibliotek som du kan bruke til å legge til drag-to-select-funksjonalitet til applikasjonen din.

Installasjon;

npm install – lagre @air/react-dra-to-select

Eller

garn legg til @air/react-dra-to-select

Du kan importere dette biblioteket til appen din som følger;

import { useSelectionContainer } from '@air/react-drag-to-select'

Egenskaper

Enkelt: Dette biblioteket velger ikke elementer. Biblioteket tegner imidlertid valgboksen og gir deg koordinater.
Støtter TypeScript: React Drag-to-select-biblioteket er skrevet i TypeScript, noe som betyr at du kan bruke det med React-apper skrevet i TypeScript og JavaScript.
Støtter testing: Du kan bruke dette biblioteket med de fleste React-testrammeverk.

React Drag-to-select er et gratis bibliotek med åpen kildekode.

Reager Dragula

React Dragula er et enkelt dra-og-slipp React-bibliotek.

Installasjon;

npm installer react-dragula – lagre

Eller,

bower install react-dragula –lagre

Egenskaper

Tilpassbar: Du kan tilpasse komponentene fra React Dragula for å passe dine behov.
Støtter berøring: Du kan bruke dette biblioteket til å lage apper som kan brukes på smarttelefoner, nettbrett og andre berøringsenheter.
Lett: React Dragula har en liten buntstørrelse, noe som gjør den perfekt hvis du vil at React-appen din skal være liten.

React Dragula er et gratis bibliotek med åpen kildekode.

Konklusjon

Du har nå en rekke Dra-og-slipp-biblioteker som du kan bruke på din neste React-applikasjon. Bibliotekvalget vil avhenge av funksjonene du har tenkt å ha på din neste app, smak og preferanser.

Hvis appen din er stor, kan du bruke flere dra-og-slipp-biblioteker for å imøtekomme ulike behov. De fleste av disse bibliotekene er kompatible med ulike React-testbiblioteker, noe som gjør det enkelt å sende feilfrie applikasjoner.