react-beautiful-dnd
Beautiful and accessible drag and drop for lists with React
Last updated 5 years ago
by alexreardon
.
Apache-2.0
·
Repository
·
Bugs
·
Original npm
·
Tarball
·
package.json
$ npm install react-beautiful-dnd
SYNC missed versions from
official npm registry.
react-beautiful-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!
Get started ๐ฉโ๐ซ
We have created a free course on egghead.io ๐ฅ to help you get started with react-beautiful-dnd as quickly as possible.
Currently supported feature set โ
- Vertical lists โ
- 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
<table>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
<Draggable /> - Full programmatic api ๐ฎ
- ๐ฒ Tree support through the
@atlaskit/treepackage - A
<Droppable />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 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:
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. 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
- Examples and samples
- Get started
- Design principles
- Animations
- Accessibility
- Browser support
Sensors ๐
The ways in which somebody can start and control a drag
API ๐๏ธโ
<DragDropContext />- Wraps the part of your application you want to have drag and drop enabled for<Droppable />- An area that can be dropped into. Contains<Draggable />s<Draggable />- What can be dragged aroundresetServerContext()- Utility for server side rendering (SSR)
Guides ๐บ
<DragDropContext />responders -onDragStart,onDragUpdate,onDragEndandonBeforeDragStart- Combining
<Draggable />s - Common setup issues
- Using
innerRef - Developer warnings and how to disable them
- Rules for
draggableIdanddroppableIds - Focus management
- Customising or skipping the drop animation
- Auto scrolling
- Controlling the screen reader
- Use the html5
doctype TypeScriptandflow- Dragging
<svg>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
<Draggable />s during a drag - โ ๏ธ Advanced
Patterns ๐ทโ
Support ๐ฉโโ๏ธ
Read this in other languages ๐
ํ๊ธ/Korean
ไธญๆ/Chinese
ะะฐ ััััะบะพะผ/Russian
Portuguรชs/PortugueseAuthor โ๏ธ
Alex Reardon @alexandereardon
Collaborators ๐ค
- Bogdan Chadkin @IAmTrySound
- Luke Batchelor @alukebatchelor
- Jared Crowe @jaredjcrowe
- Many other @Atlassian's!
Current Tags
- 12.2.0-alpha.1 ... alpha (5 years ago)
- 13.0.0-beta.1 ... beta (5 years ago)
- 13.1.1 ... latest (2 years ago)
94 Versions
- 13.1.1 ... 2 years ago
- 13.1.0 ... 4 years ago
- 13.0.0 ... 5 years ago
- 13.0.0-beta.1 ... 5 years ago
- 12.2.0 ... 5 years ago
- 12.2.0-alpha.1 ... 5 years ago
- 12.1.1 ... 5 years ago
- 12.1.0 ... 5 years ago
- 12.1.0-alpha.0 ... 5 years ago
- 12.0.0 ... 5 years ago
- 12.0.0-beta.13 ... 5 years ago
- 12.0.0-beta.12 ... 5 years ago
- 12.0.0-beta.11 ... 5 years ago
- 12.0.0-beta.10 ... 5 years ago
- 12.0.0-beta.9 ... 5 years ago
- 12.0.0-beta.8 ... 5 years ago
- 12.0.0-beta.7 ... 5 years ago
- 12.0.0-beta.6 ... 5 years ago
- 12.0.0-beta.5 ... 5 years ago
- 12.0.0-beta.4 ... 5 years ago
- 12.0.0-beta.3 ... 5 years ago
- 12.0.0-beta.2 ... 5 years ago
- 12.0.0-beta.1 ... 5 years ago
- 11.0.5 ... 5 years ago
- 12.0.0-alpha.7 ... 5 years ago
- 12.0.0-alpha.6 ... 5 years ago
- 12.0.0-alpha.4 ... 5 years ago
- 12.0.0-alpha.3 ... 5 years ago
- 12.0.0-alpha.2 ... 5 years ago
- 11.0.4 ... 5 years ago
- 12.0.0-alpha.1 ... 5 years ago
- 11.0.3 ... 6 years ago
- 11.0.2 ... 6 years ago
- 11.0.1 ... 6 years ago
- 11.0.0 ... 6 years ago
- 11.0.0-beta.3 ... 6 years ago
- 11.0.0-beta.2 ... 6 years ago
- 11.0.0-beta ... 6 years ago
- 10.1.1 ... 6 years ago
- 10.1.0 ... 6 years ago
- 10.0.4 ... 6 years ago
- 10.0.3 ... 6 years ago
- 10.0.2 ... 6 years ago
- 10.0.1 ... 6 years ago
- 10.0.0 ... 6 years ago
- 9.0.2 ... 6 years ago
- 9.0.1 ... 6 years ago
- 9.0.0 ... 6 years ago
- 8.0.7 ... 6 years ago
- 8.0.6 ... 6 years ago
- 8.0.5 ... 6 years ago
- 8.0.4 ... 6 years ago
- 8.0.3 ... 6 years ago
- 8.0.2 ... 6 years ago
- 8.0.1 ... 6 years ago
- 8.0.0 ... 6 years ago
- 7.1.3 ... 6 years ago
- 7.1.2 ... 7 years ago
- 7.1.1 ... 7 years ago
- 7.1.0 ... 7 years ago
- 7.0.2 ... 7 years ago
- 7.0.1 ... 7 years ago
- 7.0.0 ... 7 years ago
- 6.0.2 ... 7 years ago
- 6.0.1 ... 7 years ago
- 6.0.0 ... 7 years ago
- 5.0.0 ... 7 years ago
- 4.0.1 ... 7 years ago
- 4.0.0 ... 7 years ago
- 3.0.0 ... 7 years ago
- 2.6.4 ... 7 years ago
- 2.6.3 ... 7 years ago
- 2.6.2 ... 7 years ago
- 2.6.1 ... 7 years ago
- 2.6.0 ... 7 years ago
- 2.5.0 ... 7 years ago
- 2.4.1 ... 7 years ago
- 2.4.0 ... 7 years ago
- 2.3.1 ... 7 years ago
- 2.3.0 ... 7 years ago
- 2.2.4 ... 7 years ago
- 2.2.3 ... 7 years ago
- 2.2.2 ... 7 years ago
- 2.2.1 ... 7 years ago
- 2.2.0 ... 7 years ago
- 2.1.1 ... 7 years ago
- 2.1.0 ... 7 years ago
- 2.0.2 ... 7 years ago
- 2.0.1 ... 7 years ago
- 2.0.0 ... 7 years ago
- 1.0.3 ... 7 years ago
- 1.0.2 ... 7 years ago
- 1.0.1 ... 7 years ago
- 1.0.0 ... 7 years ago
Maintainers (2)
alexreardon
jaredcrowe
Downloads
Total
0
Today
0
This Week
0
This Month
0
Last Day
0
Last Week
0
Last Month
0
Dependencies (8)
- @babel/runtime-corejs2 ^7.6.0
- css-box-model ^1.2.0
- memoize-one ^5.1.1
- raf-schd ^4.0.2
- react-redux ^7.1.1
- redux ^4.0.4
- tiny-invariant ^1.0.6
- use-memo-one ^1.1.1
Dev Dependencies (74)
- @atlaskit/css-reset ^5.0.8
- @atlaskit/theme ^9.2.2
- @babel/core ^7.6.0
- @babel/plugin-proposal-class-properties ^7.5.5
- @babel/plugin-transform-modules-commonjs ^7.6.0
- @babel/plugin-transform-runtime ^7.6.0
- @babel/preset-env ^7.6.0
- @babel/preset-flow ^7.0.0
- @babel/preset-react ^7.0.0
- @emotion/babel-preset-css-prop ^10.0.17
- @emotion/core ^10.0.17
- @emotion/styled ^10.0.17
- @storybook/react ^5.1.11
- @storybook/theming ^5.1.11
- @testing-library/react ^9.1.4
- babel-core ^7.0.0-bridge.0
- babel-eslint ^10.0.3
- babel-jest ^24.9.0
- babel-loader ^8.0.6
- babel-plugin-dev-expression ^0.2.2
- babel-plugin-emotion ^10.0.17
- cross-env ^5.2.1
- cypress ^3.4.1
- emotion-theming ^10.0.17
- enzyme ^3.10.0
- enzyme-adapter-react-16 ^1.14.0
- eslint ^6.3.0
- eslint-config-airbnb ^18.0.1
- eslint-config-prettier ^6.2.0
- eslint-plugin-cypress ^2.6.1
- eslint-plugin-emotion ^10.0.14
- eslint-plugin-flowtype ^4.3.0
- eslint-plugin-import ^2.18.2
- eslint-plugin-jest ^22.17.0
- eslint-plugin-jsx-a11y ^6.2.1
- eslint-plugin-prettier ^3.1.0
- eslint-plugin-react ^7.14.3
- eslint-plugin-react-hooks ^2.0.1
- flow-bin 0.107.0
- fs-extra ^8.0.1
- globby ^10.0.1
- jest ^24.9.0
- jest-junit ^8.0.0
- jest-watch-typeahead ^0.4.0
- lighthouse ^5.2.0
- markdown-it ^9.1.0
- prettier ^1.18.2
- raf-stub ^3.0.0
- react ^16.9.0
- react-dom ^16.9.0
- react-test-renderer ^16.9.0
- react-virtualized ^9.21.1
- react-window ^1.8.5
- rimraf ^3.0.0
- rollup ^1.21.2
- rollup-plugin-babel ^4.3.3
- rollup-plugin-commonjs ^10.1.0
- rollup-plugin-json ^4.0.0
- rollup-plugin-node-resolve ^5.1.0
- rollup-plugin-replace ^2.2.0
- rollup-plugin-size-snapshot ^0.10.0
- rollup-plugin-strip ^1.2.2
- rollup-plugin-terser ^5.1.1
- styled-components 4.3.2
- stylelint ^10.1.0
- stylelint-config-prettier ^5.2.0
- stylelint-config-recommended ^2.2.0
- stylelint-config-standard ^18.3.0
- stylelint-config-styled-components ^0.1.1
- stylelint-processor-styled-components ^1.8.0
- testcafe-reporter-xunit ^2.1.0
- url-loader ^2.1.0
- wait-port ^0.2.2
- webpack ^4.39.3
Dependents (1)