Home

Awesome

<p align="center"> <img src="https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png" alt="react beautiful dnd logo" /> </p> <h1 align="center">@hello-pangea/dnd</h1> <div align="center">

Beautiful and accessible drag and drop for lists with React

CircleCI branch npm Discord Conventional Commits Commitizen friendly

quote application example

Play with this example if you want!

</div>

Core characteristics

Star History

<a href="https://star-history.com/#hello-pangea/dnd&Date"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=hello-pangea/dnd&type=Date&theme=dark" /> <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=hello-pangea/dnd&type=Date" /> <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=hello-pangea/dnd&type=Date" /> </picture> </a>

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.

course-logo

Currently supported feature set โœ…

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:

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 ๐Ÿ“–

About ๐Ÿ‘‹

Sensors ๐Ÿ”‰

The ways in which somebody can start and control a drag

API ๐Ÿ‹๏ธโ€

diagram

Guides ๐Ÿ—บ

Patterns ๐Ÿ‘ทโ€

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

Creator โœ๏ธ

Alex Reardon @alexandereardon

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

Maintainers ๐Ÿ› ๏ธ

Collaborators ๐Ÿค

Thanks ๐Ÿค—

<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>

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