{"id":13581352,"url":"https://github.com/hello-pangea/dnd","last_synced_at":"2025-04-06T07:32:02.467Z","repository":{"id":37004168,"uuid":"321362240","full_name":"hello-pangea/dnd","owner":"hello-pangea","description":"💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!","archived":false,"fork":false,"pushed_at":"2025-04-02T18:21:10.000Z","size":18932,"stargazers_count":3034,"open_issues_count":99,"forks_count":102,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-02T19:27:52.504Z","etag":null,"topics":["dnd","drag","drag-and-drop","forked","react","react-beautiful-dnd","react-component","react-drag-and-drop","react-draggable","react-sortable","reordering","sortable","typescript"],"latest_commit_sha":null,"homepage":"https://dnd.hellopangea.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hello-pangea.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":"docs/support/community-and-addons.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-14T13:50:41.000Z","updated_at":"2025-04-02T12:07:06.000Z","dependencies_parsed_at":"2023-11-12T07:25:08.741Z","dependency_job_id":"834283a0-9885-4eec-b8ec-16dd3269f94f","html_url":"https://github.com/hello-pangea/dnd","commit_stats":{"total_commits":1045,"total_committers":116,"mean_commits":9.008620689655173,"dds":0.8,"last_synced_commit":"77bec3fe1fb67265a9c7fac915d78ff4ecd940c0"},"previous_names":["react-forked/dnd"],"tags_count":127,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-pangea%2Fdnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-pangea%2Fdnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-pangea%2Fdnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-pangea%2Fdnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hello-pangea","download_url":"https://codeload.github.com/hello-pangea/dnd/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312065,"owners_count":20918340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dnd","drag","drag-and-drop","forked","react","react-beautiful-dnd","react-component","react-drag-and-drop","react-draggable","react-sortable","reordering","sortable","typescript"],"created_at":"2024-08-01T15:02:00.672Z","updated_at":"2025-04-06T07:32:01.843Z","avatar_url":"https://github.com/hello-pangea.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png\" alt=\"react beautiful dnd logo\" /\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e@hello-pangea/dnd\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n**Beautiful** and **accessible** drag and drop for lists with [`React`](https://facebook.github.io/react/)\n\n[![CircleCI branch](https://img.shields.io/circleci/project/github/hello-pangea/dnd/main.svg)](https://circleci.com/gh/hello-pangea/dnd/tree/main)\n[![npm](https://img.shields.io/npm/v/@hello-pangea/dnd.svg)](https://www.npmjs.com/package/@hello-pangea/dnd)\n[![Discord](https://img.shields.io/discord/1007763479010234398?color=blue)](https://discord.gg/zKhPpmvCEv)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-blue.svg)](https://conventionalcommits.org)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-blue.svg)](http://commitizen.github.io/cz-cli/)\n\n![quote application example](https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif)\n\n[Play with this example if you want!](https://dnd.hellopangea.com/?path=/story/examples-board--simple)\n\n\u003c/div\u003e\n\n## Core characteristics\n\n- Beautiful and [natural movement](/docs/about/animations.md) of items 💐\n- [Accessible](/docs/about/accessibility.md): powerful keyboard and screen reader support ♿️\n- [Extremely performant](/docs/support/media.md) 🚀\n- Clean and powerful api which is simple to get started with\n- Plays extremely well with standard browser interactions\n- [Unopinionated styling](/docs/guides/preset-styles.md)\n- No creation of additional wrapper dom nodes - flexbox and focus management friendly!\n\n## Star History\n\n\u003ca href=\"https://star-history.com/#hello-pangea/dnd\u0026Date\"\u003e\n \u003cpicture\u003e\n   \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=hello-pangea/dnd\u0026type=Date\u0026theme=dark\" /\u003e\n   \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/svg?repos=hello-pangea/dnd\u0026type=Date\" /\u003e\n   \u003cimg alt=\"Star History Chart\" src=\"https://api.star-history.com/svg?repos=hello-pangea/dnd\u0026type=Date\" /\u003e\n \u003c/picture\u003e\n\u003c/a\u003e\n\n## Get started 👩‍🏫\n\nAlex Reardon has created [a free course on `egghead.io` 🥚](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd) (using [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)) to help you get started with `@hello-pangea/dnd` as quickly as possible.\n\n[![course-logo](https://user-images.githubusercontent.com/2182637/43372837-8c72d3f8-93e8-11e8-9d92-a82adde7718f.png)](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)\n\n## Currently supported feature set ✅\n\n- Vertical lists ↕\n- Horizontal lists ↔\n- Movement between lists (▤ ↔ ▤)\n- [Virtual list support 👾](/docs/patterns/virtual-lists.md) - unlocking 10,000 items @ 60fps\n- [Combining items](/docs/guides/combining.md)\n- Mouse 🐭, keyboard 🎹♿️ and touch 👉📱 (mobile, tablet and so on) support\n- [Multi drag support](/docs/patterns/multi-drag.md)\n- 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 💖\n- [Conditional dragging](/docs/api/draggable.md#optional-props) and [conditional dropping](/docs/api/droppable.md#conditionally-dropping)\n- Multiple independent lists on the one page\n- Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)\n- [Add and remove items during a drag](/docs/guides/changes-while-dragging.md)\n- Compatible with semantic `\u003ctable\u003e` reordering - [table pattern](/docs/patterns/tables.md)\n- [Auto scrolling](/docs/guides/auto-scrolling.md) - automatically scroll containers and the window as required during a drag (even with keyboard 🔥)\n- Custom drag handles - you can drag a whole item by just a part of it\n- Able to move the dragging item to another element while dragging (clone, portal) - [Reparenting your `\u003cDraggable /\u003e`](/docs/guides/reparenting.md)\n- [Create scripted drag and drop experiences 🎮](/docs/sensors/sensor-api.md)\n- Allows extensions to support for [any input type you like 🕹](/docs/sensors/sensor-api.md)\n- 🌲 Tree support through the [`@atlaskit/tree`](https://atlaskit.atlassian.com/packages/confluence/tree) package\n- A `\u003cDroppable /\u003e` 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)\n- 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\n- Server side rendering (SSR) compatible\n- Plays well with [nested interactive elements](/docs/api/draggable.md#interactive-child-elements-within-a-draggable-) by default\n\n## Motivation 🤔\n\n`@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:\n\n- 📖 [Rethinking drag and drop](https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b)\n- 🎧 [React podcast: fast, accessible and beautiful drag and drop](https://reactpodcast.simplecast.fm/17)\n\n## Not for everyone ✌️\n\nThere 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. `@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.\n\n## Documentation 📖\n\n### About 👋\n\n- [Installation](/docs/about/installation.md)\n- [Examples and samples](/docs/about/examples.md)\n- [Get started](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd) (This is using [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd))\n- [Design principles](/docs/about/design-principles.md)\n- [Animations](/docs/about/animations.md)\n- [Accessibility](/docs/about/accessibility.md)\n- [Browser support](/docs/about/browser-support.md)\n\n### Sensors 🔉\n\n\u003e The ways in which somebody can start and control a drag\n\n- [Mouse dragging 🐭](/docs/sensors/mouse.md)\n- [Touch dragging 👉📱](/docs/sensors/touch.md)\n- [Keyboard dragging 🎹♿️](/docs/sensors/keyboard.md)\n- [Create your own sensor](/docs/sensors/sensor-api.md) (allows for any input type as well as scripted experiences)\n\n### API 🏋️‍\n\n![diagram](https://user-images.githubusercontent.com/2182637/53607406-c8f3a780-3c12-11e9-979c-7f3b5bd1bfbd.gif)\n\n- [`\u003cDragDropContext /\u003e`](/docs/api/drag-drop-context.md) - _Wraps the part of your application you want to have drag and drop enabled for_\n- [`\u003cDroppable /\u003e`](/docs/api/droppable.md) - _An area that can be dropped into. Contains `\u003cDraggable /\u003e`s_\n- [`\u003cDraggable /\u003e`](/docs/api/draggable.md) - _What can be dragged around_\n\n### Guides 🗺\n\n- [`\u003cDragDropContext /\u003e` responders](/docs/guides/responders.md) - _`onDragStart`, `onDragUpdate`, `onDragEnd` and `onBeforeDragStart`_\n- [Combining `\u003cDraggable /\u003e`s](/docs/guides/combining.md)\n- [Common setup issues](/docs/guides/common-setup-issues.md)\n- [Using `innerRef`](/docs/guides/using-inner-ref.md)\n- [Setup problem detection and error recovery](/docs/guides/setup-problem-detection-and-error-recovery.md)\n- [Rules for `draggableId` and `droppableId`s](/docs/guides/identifiers.md)\n- [Browser focus retention](/docs/guides/browser-focus.md)\n- [Customising or skipping the drop animation](/docs/guides/drop-animation.md)\n- [Auto scrolling](/docs/guides/auto-scrolling.md)\n- [Controlling the screen reader](/docs/guides/screen-reader.md)\n- [Use the html5 `doctype`](/docs/guides/doctype.md)\n- [`TypeScript`: type information](/docs/guides/types.md)\n- [Dragging `\u003csvg\u003e`s](/docs/guides/dragging-svgs.md)\n- [Avoiding image flickering](/docs/guides/avoiding-image-flickering.md)\n- [Non-visible preset styles](/docs/guides/preset-styles.md)\n- [How we detect scroll containers](/docs/guides/how-we-detect-scroll-containers.md)\n- [How we use dom events](/docs/guides/how-we-use-dom-events.md) - _Useful if you need to build on top of `@hello-pangea/dnd`_\n- [Adding `\u003cDraggable /\u003e`s during a drag (11.x behaviour)](/docs/guides/changes-while-dragging.md) - _⚠️ Advanced_\n- [Setting up Content Security Policy](/docs/guides/content-security-policy.md)\n\n### Patterns 👷‍\n\n- [Virtual lists 👾](/docs/patterns/virtual-lists.md)\n- [Multi drag](/docs/patterns/multi-drag.md)\n- [Tables](/docs/patterns/tables.md)\n- [Reparenting a `\u003cDraggable /\u003e`](/docs/guides/reparenting.md) - _Using our cloning API or your own portal_\n\n### Support 👩‍⚕️\n\n- [Engineering health](/docs/support/engineering-health.md)\n- [Community and addons](/docs/support/community-and-addons.md)\n- [Release notes and changelog](https://github.com/hello-pangea/dnd/releases)\n- [Upgrading](/docs/support/upgrading.md)\n- [Road map](https://github.com/hello-pangea/dnd/issues)\n- [Media](/docs/support/media.md)\n\n## Creator ✍️\n\nAlex Reardon [@alexandereardon](https://twitter.com/alexandereardon)\n\n\u003e Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.\n\n## Maintainers 🛠️\n\n- Gabriel Santerre [@100terres](https://github.com/100terres)\n- Reece Carolan [@Xhale1](https://github.com/Xhale1)\n- Many [@Atlassian](https://twitter.com/Atlassian)'s have contributed to the original [`react-beautiful-dnd`](https://github.com/atlassian/react-beautiful-dnd). _Atlassian is no longer involved with this project._\n\n## Collaborators 🤝\n\n- Bogdan Chadkin [@IAmTrySound](https://twitter.com/IAmTrySound)\n\n## Thanks 🤗\n\n\u003ca href=\"https://www.chromatic.com/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\" width=\"153\" height=\"30\" alt=\"Chromatic\" /\u003e\u003c/a\u003e\n\nThanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhello-pangea%2Fdnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhello-pangea%2Fdnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhello-pangea%2Fdnd/lists"}