한글/Korean
На русском/Russian
Português/Portuguese
Ελληνικά/Greek
日本語/JapaneseWhat is this?
A React library for building beautiful, accessible drag and drop interactions for lists, supporting vertical and horizontal lists, movement between lists, and nested lists.
A React library for building beautiful, accessible drag and drop interactions for lists, supporting vertical and horizontal lists, movement between lists, and nested lists.Is this a general drag-and-drop toolkit or something more specific?It is a higher-level abstraction built specifically for lists, not a general-purpose drag and drop primitive library like react-dnd.
It is a higher-level abstraction built specifically for lists, not a general-purpose drag and drop primitive library like react-dnd.How do I add it to a project?Install it as an npm/yarn dependency and wrap the parts of your app that need drag and drop with its DragDropContext, Droppable, and Draggable components; there's also a free egghead.io course to get started.
Install it as an npm/yarn dependency and wrap the parts of your app that need drag and drop with its DragDropContext, Droppable, and Draggable components; there's also a free egghead.io course to get started.What does it depend on under the hood?It's built on React and relies on supporting packages like css-box-model, memoize-one, redux and react-redux internally.
It's built on React and relies on supporting packages like css-box-model, memoize-one, redux and react-redux internally.Is this still safe to use for a new project?No — the project is archived and deprecated on npm; the team recommends moving to Pragmatic drag and drop for ongoing work instead.
No — the project is archived and deprecated on npm; the team recommends moving to Pragmatic drag and drop for ongoing work instead.Who was this built for?Frontend developers building React apps with reorderable lists, including users who need strong screen reader and keyboard accessibility support.
Frontend developers building React apps with reorderable lists, including users who need strong screen reader and keyboard accessibility support.What drag input methods does it support?Mouse, keyboard, and touch input are all supported out of the box, including auto scrolling during keyboard-driven drags.
Mouse, keyboard, and touch input are all supported out of the box, including auto scrolling during keyboard-driven drags.Can it handle really large lists?Yes, it supports virtual lists, unlocking 10,000 items at 60fps.
Yes, it supports virtual lists, unlocking 10,000 items at 60fps.Does it support dragging multiple items at once?Yes, multi-drag is part of the supported feature set alongside combining items and conditional dragging/dropping.
Yes, multi-drag is part of the supported feature set alongside combining items and conditional dragging/dropping.Why shouldn't I just use react-dnd instead?react-dnd offers broader low-level drag and drop primitives, while react-beautiful-dnd trades that breadth for a more polished, natural, and accessible experience specifically tailored to list reordering.
react-dnd offers broader low-level drag and drop primitives, while react-beautiful-dnd trades that breadth for a more polished, natural, and accessible experience specifically tailored to list reordering.What are similar projects?Sortable, dnd-kit, pragmatic-drag-and-drop, react-sortable-hoc, react-dnd, dropzone, Vue.Draggable, tui.calendar
Sortable, dnd-kit, pragmatic-drag-and-drop, react-sortable-hoc, react-dnd, dropzone, Vue.Draggable, tui.calendarWhich topics is it in?sortable, drag-and-drop, accessibility, ui-components, deprecated, ui, web-development, react, frontend, library, typescript, javascript
sortable, drag-and-drop, accessibility, ui-components, deprecated, ui, web-development, react, frontend, library, typescript, javascript