Github url

react-beautiful-dnd

by atlassian

Beautiful and accessible drag and drop for lists with React

20.3K Stars 1.4K Forks Last release: 5 months ago (v13.0.0) Other 681 Commits 102 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react beautiful dnd logo

react-beautiful-dnd (rbd)

**Beautiful** and **accessible** drag and drop for lists with React CircleCI branch npm quote application example Play with this example if you want!

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!

Get started ๐Ÿ‘ฉโ€๐Ÿซ

We have created [a free course on

egghead.io

๐Ÿฅš](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd) to help you get started with

react-beautiful-dnd

as quickly as possible.

course-logo

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](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/patterns/tables.md)- [Auto scrolling](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/auto-scrolling.md) - 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 

](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/reparenting.md)
- [Create scripted drag and drop experiences ๐ŸŽฎ](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/sensors/sensor-api.md)
- Allows extensions to support for [any input type you like ๐Ÿ•น](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/sensors/sensor-api.md)
- ๐ŸŒฒ Tree support through the [

@atlaskit/tree

](https://atlaskit.atlassian.com/packages/core/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()](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/api/reset-server-context.md)
- Plays well with [nested interactive elements](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/api/draggable.md#interactive-child-elements-within-a-draggable-) by default

## Motivation ๐Ÿค”

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:
  - ๐Ÿ“– [Rethinking drag and drop](https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b)
  - ๐ŸŽง [React podcast: fast, accessible and beautiful drag and drop](https://reactpodcast.simplecast.fm/17)

## 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

](https://github.com/react-dnd/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](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html) 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 ๐Ÿ“–

### About ๐Ÿ‘‹

  - [Installation](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/about/installation.md)
  - [Examples and samples](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/about/examples.md)
  - [Get started](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)
  - [Design principles](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/about/design-principles.md)
  - [Animations](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/about/animations.md)
  - [Accessibility](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/about/accessibility.md)
  - [Browser support](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/about/browser-support.md)

### Sensors ๐Ÿ”‰

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

  - [Mouse dragging ๐Ÿญ](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/sensors/mouse.md)
  - [Touch dragging ๐Ÿ‘‰๐Ÿ“ฑ](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/sensors/touch.md)
  - [Keyboard dragging ๐ŸŽนโ™ฟ๏ธ](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/sensors/keyboard.md)
  - [Create your own sensor](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/sensors/sensor-api.md) (allows for any input type as well as scripted experiences)

### API ๐Ÿ‹๏ธโ€

![diagram](https://user-images.githubusercontent.com/2182637/53607406-c8f3a780-3c12-11e9-979c-7f3b5bd1bfbd.gif)

  - [

](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/api/drag-drop-context.md) - _Wraps the part of your application you want to have drag and drop enabled for_
  - [

](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/api/droppable.md) - _An area that can be dropped into. Contains 

s_ 
  - [

](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/api/draggable.md) - _What can be dragged around_
  - [

resetServerContext()

](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/api/reset-server-context.md) - _Utility for server side rendering (SSR)_

### Guides ๐Ÿ—บ

  - [

 responders](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/responders.md) - 
_```
onDragStart

,

onDragUpdate

,

onDragEnd

and

onBeforeDragStart
```_
  - [Combining 

s](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/combining.md)
  - [Common setup issues](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/common-setup-issues.md)
  - [Using 

innerRef

](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/using-inner-ref.md)
  - [Setup problem detection and error recovery](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/setup-problem-detection-and-error-recovery.md)
  - [Rules for 

draggableId

 and 

droppableId

s](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/identifiers.md)
  - [Browser focus retention](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/browser-focus.md)
  - [Customising or skipping the drop animation](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/drop-animation.md)
  - [Auto scrolling](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/auto-scrolling.md)
  - [Controlling the screen reader](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/screen-reader.md)
  - [Use the html5 

doctype

](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/doctype.md)
  - [

TypeScript

 and 

flow

: type information](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/types.md)
  - [Dragging 

s](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/dragging-svgs.md)
  - [Avoiding image flickering](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/avoiding-image-flickering.md)
  - [Non-visible preset styles](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/preset-styles.md)
  - [How we detect scroll containers](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/how-we-detect-scroll-containers.md)
  - [How we use dom events](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/how-we-use-dom-events.md) - _Useful if you need to build on top of 

react-beautiful-dnd

  - [Adding 

s during a drag (11.x behaviour)](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/changes-while-dragging.md) - _โš ๏ธ Advanced_
  - [Setting up Content Security Policy](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/content-security-policy.md)

### Patterns ๐Ÿ‘ทโ€

  - [Virtual lists ๐Ÿ‘พ](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/patterns/virtual-lists.md)
  - [Multi drag](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/patterns/multi-drag.md)
  - [Tables](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/patterns/tables.md)
  - [Reparenting a 

``` ](https://github.com/atlassian/react-beautiful-dnd/blob/master//docs/guides/reparenting.md) - Using our cloning API or your own portal

Support ๐Ÿ‘ฉโ€โš•๏ธ

Read this in other languages ๐ŸŒŽ

Author โœ๏ธ

Alex Reardon @alexandereardon

Collaborators ๐Ÿค

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.