Drag and Drop in React | React Drag and Drop Toolkit

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


  • 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 i react react-dom @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortableimport 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}>
// 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}>
// App
function App() {
  return (
      <Draggable />
      <Droppable />



Drag & Drop Toolkit For React - dnd-kit

Download Details:


Author: clauderic

Live Demo: View The Demo

Download Link: Download The Source Code

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

License: MIT

#react #reactjs 

Drag and Drop in React | React Drag and Drop Toolkit
1.60 GEEK