Drag & Drop Toolkit for React

A modern, lightweight, performant, accessible, and extensible drag & drop toolkit for React.

Features:

• Built for React: exposes hooks such as useDraggable and useDroppable, and won’t require you to re-architect your app or create additional wrapper DOM nodes.
• Feature packed: customizable collision detection algorithms, multiple activators, draggable overlay, drag handles, auto-scrolling, constraints, and so much more.
• Supports a wide range of use cases: vertical lists, horizontal lists, grids, multiple containers, nested contexts, variable sized list and grids, transformed items, virtualized lists.
• Zero dependencies and modular: the core of the library weighs around 10kb minified and has no external dependencies. It’s built around built-in React state management and context, which keeps the library lean.
• Built-in support for multiple input methods: Pointer, mouse, touch and keyboard sensors.
• Fully customizable & extensible: Customize every detail: animations, transitions, behaviours, styles. Build your own sensors, collision detection algorithms, customize key bindings and so much more.
• Accessibility: Keyboard support, sensible default aria attributes, customizable screen reader instructions and live regions built-in.
• Performance: It was built with performance in mind in order to support silky smooth animations.
• Presets

Basic usage:

1. Install and import the dnd-kit.

## NPM
$ npm i react react-dom @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable
import React from 'react';
import {DndContext} from '@dnd-kit/core';
import {Draggable} from './Draggable';
import {Droppable} from './Droppable';

2. Basic usage.

// Droppable
import React from 'react';
import {useDroppable} from '@dnd-kit/core';
export function Droppable(props) {
  const {isOver, setNodeRef} = useDroppable({
    id: props.id,
  });
  const style = {
    opacity: isOver ? 1 : 0.5,
  };
  return (
    <div ref={setNodeRef} style={style}>
      {props.children}
    </div>
  );
}
// Draggable
import React from 'react';
import {useDraggable} from '@dnd-kit/core';
import {CSS} from '@dnd-kit/utilities';
function Draggable(props) {
  const {attributes, listeners, setNodeRef, transform} = useDraggable({
    id: props.id,
  });
  const style = {
    // Outputs `translate3d(x, y, 0)`
    transform: CSS.Translate.toString(transform),
  };
  return (
    <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
      {props.children}
    </button>
  );
}
// App
function App() {
  return (
    <DndContext>
      <Draggable />
      <Droppable />
    </DndContext>
  )
}

Preview:

Download Details:

Author: clauderic

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/clauderic/dnd-kit

#react #reactjs #javascript