Beautiful and accessible drag and drop for lists with React
npm install react-beautiful-dnd-next

Beautiful and accessible drag and drop for lists with React


- 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!
We have created a free course on egghead.io π₯ to help you get started with react-beautiful-dnd as quickly as possible.

- Vertical lists β - π Rethinking drag and drop There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing - Installation > The ways in which somebody can start and control a drag - Mouse dragging π - - - Multi drag - Engineering health -  Alex Reardon @alexandereardon - Bogdan Chadkin @IAmTrySound
- Horizontal lists β
- Movement between lists (β€ β β€)
- 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
- Compatible with ReactDOM.createPortal - portal pattern
- π² 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 - see resetServerContext()
- Plays well with nested interactive elements by defaultMotivation π€
react-beautiful-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:
- π§ React podcast: fast, accessible and beautiful drag and dropNot for everyone βοΈ
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. react-beautiful-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 react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So react-beautiful-dnd might not be for you depending on what your use case is.Documentation π
$3
- Examples and samples
- Get started
- Design principles
- Animations
- Accessibility
- Browser support$3
- Touch dragging ππ±
- Keyboard dragging πΉβΏοΈ$3
- _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_
- resetServerContext() - _Utility for server side rendering (SSR)_$3
responders - _onDragStart, onDragUpdate, onDragEnd and onBeforeDragStart_
- Combining s
- Common setup issues
- Using innerRef
- Developer warnings and how to disable them
- Rules for draggableId and droppableIds
- Customising or skipping the drop animation
- Auto scrolling
- Controlling the screen reader
- Use the html5 doctype
- TypeScript and flow
- Dragging s
- Non-visible preset styles
- How we detect scroll containers
- How we use dom events - _Useful if you need to build on top of react-beautiful-dnd_
- Adding s during a drag - _β οΈ Advanced_$3
- Tables
- Using a portal (ReactDOM.createPortal)$3
- Community and addons
- Release notes and changelog
- Upgrading
- Road map
- MediaRead this in other languages π
- 
- Author βοΈ
Collaborators π€
- Luke Batchelor @alukebatchelor
- Jared Crowe @jaredjcrowe
- Many other @Atlassian's!