A modern, lightweight, performant, accessible, and extensible drag & drop toolkit for React.
useDraggable
and useDroppable
, and won’t require you to re-architect your app or create additional wrapper DOM nodes.1. Install and import the dnd-kit.
# NPM
$ 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}>
{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>
)
}
Author: clauderic
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/clauderic/dnd-kit
License: MIT