react-draggable vs react-dnd vs react-beautiful-dnd vs @hello-pangea/dnd | "Drag-and-Drop-Bibliotheken für React" npm-Pakete Vergleich

Paket	Downloads	Stars	Größe	Issues	Veröffentlichung	Lizenz

react-draggable	2,902,696	9,231	243 kB	243	vor 2 Monaten	MIT
react-dnd	2,416,934	21,548	231 kB	472	-	MIT
react-beautiful-dnd	1,768,398	34,030	1.39 MB	644	-	Apache-2.0
@hello-pangea/dnd	927,909	3,512	1.26 MB	123	vor 7 Monaten	Apache-2.0

Paket

Downloads

Stars

Größe

Issues

Veröffentlichung

Lizenz

react-draggable

2,902,696

9,231

243 kB

243

vor 2 Monaten

MIT

react-dnd

2,416,934

21,548

231 kB

472

MIT

react-beautiful-dnd

1,768,398

34,030

1.39 MB

644

Apache-2.0

@hello-pangea/dnd

927,909

3,512

1.26 MB

123

vor 7 Monaten

Apache-2.0

Zugänglichkeit

react-draggable:
react-draggable bietet grundlegende Zugänglichkeitsfunktionen, einschließlich der Unterstützung von Tastaturinteraktionen für das Ziehen von Elementen. Die Bibliothek ermöglicht es Entwicklern, ARIA-Rollen und -Eigenschaften hinzuzufügen, um die Zugänglichkeit zu verbessern, aber sie bietet keine umfassende, integrierte Unterstützung für Drag-and-Drop-Zugänglichkeit.
react-dnd:
react-dnd bietet eine flexible Architektur, die es Entwicklern ermöglicht, Zugänglichkeitsfunktionen zu implementieren, aber es liegt in der Verantwortung des Entwicklers, sicherzustellen, dass die Drag-and-Drop-Interaktionen zugänglich sind. Die Bibliothek bietet keine integrierte ARIA-Unterstützung, was bedeutet, dass zusätzliche Arbeit erforderlich ist, um sicherzustellen, dass die Komponenten für alle Benutzer zugänglich sind.
react-beautiful-dnd:
react-beautiful-dnd wurde mit einem starken Fokus auf Zugänglichkeit entwickelt. Es implementiert ARIA-Richtlinien für Drag-and-Drop-Interaktionen und sorgt dafür, dass Benutzer mit Tastatur und Bildschirmlesern nahtlos mit den Komponenten interagieren können. Die Bibliothek bietet auch anpassbare Zugänglichkeitsmerkmale, um verschiedenen Anforderungen gerecht zu werden.
@hello-pangea/dnd:
@hello-pangea/dnd legt großen Wert auf Zugänglichkeit und bietet Funktionen, die sicherstellen, dass Drag-and-Drop-Interaktionen für alle Benutzer, einschließlich solcher mit Behinderungen, zugänglich sind. Die Bibliothek folgt den besten Praktiken für die Implementierung von ARIA-Rollen und -Eigenschaften, um die Interaktion mit Bildschirmlesern und anderen unterstützenden Technologien zu verbessern.

Flexibilität

react-draggable:
react-draggable bietet Flexibilität beim Ziehen von Elementen innerhalb eines Containers, ermöglicht jedoch keine komplexen Drag-and-Drop-Interaktionen wie das Verschieben von Elementen zwischen mehreren Containern. Die Bibliothek ist einfach zu bedienen und anpassbar, eignet sich jedoch am besten für einfache Drag-and-Drop-Szenarien, bei denen nur das Ziehen von Elementen erforderlich ist.
react-dnd:
react-dnd ist eine der flexibelsten Drag-and-Drop-Bibliotheken für React und unterstützt eine Vielzahl von Szenarien, einschließlich komplexer Interaktionen zwischen mehreren Containern. Die Bibliothek ermöglicht es Entwicklern, benutzerdefinierte Drag-and-Drop-Logik zu implementieren, einschließlich der Unterstützung für mehrere Drag-Quellen und Drop-Ziele, was sie ideal für Anwendungen mit komplexen Anforderungen macht.
react-beautiful-dnd:
react-beautiful-dnd ist flexibel, wenn es um das Neuanordnen von Elementen innerhalb einer Liste oder zwischen Listen geht. Die API ist jedoch stärker auf diese Anwendungsfälle ausgerichtet, was bedeutet, dass sie möglicherweise nicht so anpassbar ist für komplexere Drag-and-Drop-Interaktionen wie das Verschieben von Elementen zwischen mehreren Containern mit unterschiedlichen Layouts.
@hello-pangea/dnd:
@hello-pangea/dnd bietet eine flexible API, die es Entwicklern ermöglicht, Drag-and-Drop-Interaktionen einfach anzupassen und zu erweitern. Die Bibliothek unterstützt verschiedene Drag-and-Drop-Szenarien, einschließlich des Neuanordnens von Listen und des Verschiebens von Elementen zwischen mehreren Containern, und bietet Anpassungsoptionen für Animationen, Stile und Verhalten.

Beispielcode

react-draggable:

Ein einfaches Beispiel für react-draggable zum Ziehen eines Elements:

import { Draggable } from 'react-draggable';

function App() {
  return (
    <Draggable>
      <div style={{ width: '100px', height: '100px', background: 'lightcoral' }}>Drag me</div>
    </Draggable>
  );
}

react-dnd:

Ein einfaches Beispiel für react-dnd zum Ziehen und Ablegen von Elementen:

import { DndProvider, useDrag, useDrop } from 'react-dnd';
const ItemType = 'ITEM';

function DraggableItem() {
  const [{ isDragging }, drag] = useDrag({
    type: ItemType,
    item: { id: 1 },
    collect: (monitor) => ({ isDragging: monitor.isDragging() }),
  });

  return <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>Drag me</div>;
}

function DropZone() {
  const [{ isOver }, drop] = useDrop({
    accept: ItemType,
    drop: () => ({ name: 'DropZone' }),
    collect: (monitor) => ({ isOver: monitor.isOver() }),
  });

  return <div ref={drop} style={{ background: isOver ? 'lightblue' : 'lightgray', height: '100px' }}>Drop here</div>;
}

function App() {
  return (
    <DndProvider>
      <DraggableItem />
      <DropZone />
    </DndProvider>
  );
}

react-beautiful-dnd:

Ein einfaches Beispiel für react-beautiful-dnd zum Neuanordnen von Elementen in einer Liste:

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const items = ['Item 1', 'Item 2', 'Item 3'];

function App() {
  return (
    <DragDropContext onDragEnd={() => {}}
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable key={item} draggableId={item} index={index}>
                {(provided) => (
                  <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                    {item}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

@hello-pangea/dnd:

Ein einfaches Beispiel für @hello-pangea/dnd zum Neuanordnen von Elementen in einer Liste:

import { DndContext, SortableContext, SortableItem } from '@hello-pangea/dnd';

const items = ['Item 1', 'Item 2', 'Item 3'];

function App() {
  return (
    <DndContext>
      <SortableContext items={items}>
        {items.map((item) => (
          <SortableItem key={item} id={item}>
            {item}
          </SortableItem>
        ))}
      </SortableContext>
    </DndContext>
  );
}