@hello-pangea/dnd

Core characteristics

- Beautiful and natural movement of items 💐
- Accessible: powerful keyboard and screen reader support ♿️
- Extremely performant 🚀
- Clean and powerful api which is simple to get started with
- Plays extremely well with standard browser interactions
- Unopinionated styling
- No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Star History

Get started 👩‍🏫

Alex Reardon has created a free course on egghead.io 🥚 (using react-beautiful-dnd) to help you get started with @hello-pangea/dnd as quickly as possible.


Currently supported feature set ✅

- Vertical lists ↕
- Horizontal lists ↔
- Movement between lists (▤ ↔ ▤)
- Virtual list support 👾 - unlocking 10,000 items @ 60fps
- Combining items
- Mouse 🐭, keyboard 🎹♿️ and touch 👉📱 (mobile, tablet and so on) support
- Multi drag support
- Incredible screen reader support ♿️ - we provide an amazing experience for english screen readers out of the box 📦. We also provide complete customisation control and internationalisation support for those who need it 💖
- Conditional dragging and conditional dropping
- Multiple independent lists on the one page
- Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)
- Add and remove items during a drag
- Compatible with semantic

reordering - table pattern
- Auto scrolling - automatically scroll containers and the window as required during a drag (even with keyboard 🔥)
- Custom drag handles - you can drag a whole item by just a part of it
- Able to move the dragging item to another element while dragging (clone, portal) - Reparenting your
- Create scripted drag and drop experiences 🎮
- Allows extensions to support for any input type you like 🕹
- 🌲 Tree support through the @atlaskit/tree package
- A list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)
- Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list
- Server side rendering (SSR) compatible
- Plays well with nested interactive elements by default

Motivation 🤔

@hello-pangea/dnd exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:

- 📖 Rethinking drag and drop
- 🎧 React podcast: fast, accessible and beautiful drag and drop

Not for everyone ✌️

There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. @hello-pangea/dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality @hello-pangea/dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. One shortcoming is that grid layouts are not supported (yet). So @hello-pangea/dnd might not be for you depending on what your use case is.

Documentation 📖

$3

- Installation
- Examples and samples
- Get started (This is using react-beautiful-dnd)
- Design principles
- Animations
- Accessibility
- Browser support

$3

> The ways in which somebody can start and control a drag

- Mouse dragging 🐭
- Touch dragging 👉📱
- Keyboard dragging 🎹♿️
- Create your own sensor (allows for any input type as well as scripted experiences)

$3

!diagram

- - _Wraps the part of your application you want to have drag and drop enabled for_
- - _An area that can be dropped into. Contains s_
- - _What can be dragged around_

$3

- responders - _onDragStart, onDragUpdate, onDragEnd and onBeforeDragStart_
- Combining s
- Common setup issues
- Using innerRef
- Setup problem detection and error recovery
- Rules for draggableId and droppableIds
- Browser focus retention
- Customising or skipping the drop animation
- Auto scrolling
- Controlling the screen reader
- Use the html5 doctype
- TypeScript: type information
- Dragging s
- Avoiding image flickering
- Non-visible preset styles
- How we detect scroll containers
- How we use dom events - _Useful if you need to build on top of @hello-pangea/dnd_
- Adding s during a drag (11.x behaviour) - _⚠️ Advanced_
- Setting up Content Security Policy

$3

- Virtual lists 👾
- Multi drag
- Tables
- Reparenting a - _Using our cloning API or your own portal_

$3

- Engineering health
- Community and addons
- Release notes and changelog
- Upgrading
- Road map
- Media

Creator ✍️

Alex Reardon @alexandereardon

> Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.

Maintainers 🛠️

- Gabriel Santerre @100terres
- Reece Carolan @Xhale1
- Many @Atlassian's have contributed to the original react-beautiful-dnd. _Atlassian is no longer involved with this project._

Collaborators 🤝

- Bogdan Chadkin @IAmTrySound

Thanks 🤗

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.