react-beautiful-dnd
v13.1.1 Apache-2.0 Deprecatedreact-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672
Beautiful and accessible drag and drop for lists with React
react-beautiful-dnd Download Trends
About react-beautiful-dnd
react-beautiful-dnd is a specialized library for implementing drag and drop functionality within React applications, specifically focusing on reordering lists. It addresses the common challenge of creating intuitive user interfaces where items can be moved and sorted dynamically, enhancing user experience by providing visual feedback and smooth transitions during the drag-and-drop process. The library aims to make this complex interaction pattern accessible and developer-friendly.
At its core, the library is built with accessibility and a great developer experience in mind. It prioritizes a semantic HTML structure and keyboard support to ensure users who cannot use a mouse can still interact with the drag-and-drop lists. This philosophy makes it suitable for a wide range of applications, from simple to-do lists to more complex inventory management systems where item ordering is critical.
The primary API patterns revolve around a few key components and hooks. The `DragDropContext` component acts as a global provider for drag-and-drop operations. `Droppable` components define areas where items can be dropped, and `Draggable` components wrap the individual items that can be moved. The `onDragEnd` prop on `DragDropContext` is crucial for handling the final state after a drag operation, allowing developers to update their application's data accordingly.
react-beautiful-dnd integrates seamlessly into typical React workflows. It is designed to work with functional components and hooks, aligning with modern React development practices. The state management of the reordered lists is left to the developer, allowing integration with various state management solutions like React's Context API, Redux, or Zustand, making it flexible for different project architectures.
With 2.1M weekly downloads and 34.0K GitHub stars, react-beautiful-dnd is a mature and widely adopted library. Its bundle size of 80.4 kB (gzipped) is a reasonable trade-off for the comprehensive functionality it offers in managing complex drag-and-drop interactions. The library is actively maintained, though with 644 open issues, developers should be prepared to potentially investigate or contribute to solutions for edge cases.
Despite its robustness, developers should be aware that react-beautiful-dnd is primarily designed for list reordering and may not be the optimal choice for free-form drag-and-drop interfaces or complex grid-based reordering. Its dependency on specific DOM structures and its focus on declarative rendering means it might require adjustments in projects with highly imperative DOM manipulation. The 'last updated' date also indicates a need to verify ongoing maintenance for the latest React versions.
When to use
- When reordering items within vertical or horizontal lists is a core feature of your React application.
- When providing an accessible drag-and-drop experience, including keyboard navigation, is a priority for your users.
- When integrating with existing React state management solutions like Redux or Context API to update list order after a drag ends.
- When leveraging the `DragDropContext`, `Droppable`, and `Draggable` components to define clear drop zones and movable items.
- When implementing interactive UIs such as Kanban boards, task managers, or sortable content blocks.
- When you need to handle the `onDragEnd` event to update your application's data source with the new item order.
When NOT to use
- If you only need basic click-to-reorder functionality without visual dragging, consider simpler event handlers with state updates.
- If your drag-and-drop requirements involve complex, free-form canvas interactions or arbitrary element placement, explore libraries designed for that purpose.
- If you are working in an environment that heavily relies on imperative DOM manipulation, as this library expects a declarative approach.
- If a significantly smaller bundle size is a critical requirement and your drag-and-drop needs are minimal, a lighter alternative might suffice.
- When the primary interaction is not list reordering, such as dragging files onto an upload zone, a more specialized drag-and-drop library might be more appropriate.