react-beautiful-dnd

WebJar for react-beautiful-dnd

License	Apache-2.0
Categories	React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	react-beautiful-dnd
Last Version	13.0.0
Release Date	Aug 24, 2020
Type	jar
Description	react-beautiful-dnd WebJar for react-beautiful-dnd
Project URL	https://www.webjars.org
Source Code Management	https://github.com/atlassian/react-beautiful-dnd

Download react-beautiful-dnd

Filename	Size
react-beautiful-dnd-13.0.0.pom
react-beautiful-dnd-13.0.0.jar	409 KB
react-beautiful-dnd-13.0.0-sources.jar	22 bytes
react-beautiful-dnd-13.0.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-beautiful-dnd/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-beautiful-dnd</artifactId>
    <version>13.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-beautiful-dnd/
implementation 'org.webjars.npm:react-beautiful-dnd:13.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-beautiful-dnd/
implementation ("org.webjars.npm:react-beautiful-dnd:13.0.0")

Apache Buildr

'org.webjars.npm:react-beautiful-dnd:jar:13.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="react-beautiful-dnd" rev="13.0.0">
  <artifact name="react-beautiful-dnd" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-beautiful-dnd', version='13.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-beautiful-dnd" % "13.0.0"

Leiningen

[org.webjars.npm/react-beautiful-dnd "13.0.0"]

Dependencies

compile (7)

Group / Artifact	Type	Version
org.webjars.npm : css-box-model	jar	[1.2.0,2)
org.webjars.npm : use-memo-one	jar	[1.1.1,2)
org.webjars.npm : babel__runtime	jar	[7.8.4,8)
org.webjars.npm : raf-schd	jar	[4.0.2,5)
org.webjars.npm : redux	jar	[4.0.4,5)
org.webjars.npm : react-redux	jar	[7.1.1,8)
org.webjars.npm : memoize-one	jar	[5.1.1,6)

Project Modules

There are no modules declared in this project.

react-beautiful-dnd ^(rbd)

Beautiful and accessible drag and drop for lists with React

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 🥚 to help you get started with react-beautiful-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 <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 />
• Create scripted drag and drop experiences 🎮
• Allows extensions to support for any input type you like 🕹
• 🌲 Tree support through the @atlaskit/tree package
• 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:

• 📖 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. 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

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

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 around
• resetServerContext() - Utility for server side rendering (SSR)

Guides 🗺

• <DragDropContext /> responders - onDragStart, onDragUpdate, onDragEnd and onBeforeDragStart
• Combining <Draggable />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 and flow: type information
• Dragging <svg>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 react-beautiful-dnd
• Adding <Draggable />s during a drag (11.x behaviour) - ⚠️ Advanced
• Setting up Content Security Policy

Patterns 👷‍

• Virtual lists 👾
• Multi drag
• Tables
• Reparenting a <Draggable /> - Using our cloning API or your own portal

Support 👩‍⚕️

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

Read this in other languages 🌎

• 한글/Korean
• На русском/Russian
• Português/Portuguese

Author ✍️

Alex Reardon @alexandereardon

Collaborators 🤝

• Bogdan Chadkin @IAmTrySound
• Luke Batchelor @alukebatchelor
• Jared Crowe @jaredjcrowe
• Many other @Atlassian's!

Atlassian

Versions

Version
13.0.0 Aug 24, 2020
13.0.0-beta.1 Jul 19, 2021
11.0.4 Jun 28, 2019
3.0.0 Dec 15, 2017