react-beautiful-dnd | Beautiful and accessible drag and drop for lists with React | Widget library

 by   atlassian JavaScript Version: 13.0.0-beta.1 License: Non-SPDX

kandi X-RAY | react-beautiful-dnd Summary

kandi X-RAY | react-beautiful-dnd Summary

react-beautiful-dnd is a JavaScript library typically used in Institutions, Learning, Administration, Public Services, User Interface, Widget, React applications. react-beautiful-dnd has no bugs, it has no vulnerabilities and it has medium support. However react-beautiful-dnd has a Non-SPDX License. You can install using 'npm i treelab-dnd' or download it from GitHub, npm.

This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and have no current plans for further feature development or improvements. It will continue to be here on GitHub and we will still make critical updates (e.g. security fixes, if any) as required, but will not be actively monitoring or replying to issues and pull requests. We recommend that you don’t raise issues or pull requests, as they will not be reviewed or actioned until further notice.

            kandi-support Support

              react-beautiful-dnd has a medium active ecosystem.
              It has 30204 star(s) with 2412 fork(s). There are 251 watchers for this library.
              It had no major release in the last 12 months.
              There are 507 open issues and 1034 have been closed. On average issues are closed in 116 days. There are 72 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of react-beautiful-dnd is 13.0.0-beta.1

            kandi-Quality Quality

              react-beautiful-dnd has 0 bugs and 0 code smells.

            kandi-Security Security

              react-beautiful-dnd has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              react-beautiful-dnd code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              react-beautiful-dnd has a Non-SPDX License.
              Non-SPDX licenses can be open source with a non SPDX compliant license, or non open source licenses, and you need to review them closely before use.

            kandi-Reuse Reuse

              react-beautiful-dnd releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions are available. Examples and code snippets are not available.

            Top functions reviewed by kandi - BETA

            kandi has reviewed react-beautiful-dnd and discovered the below as its top functions. This is intended to give you an instant insight into react-beautiful-dnd implemented functionality, and help decide if they suit your requirements.
            • Get handle bindings for touch events .
            • Create drag events .
            • Gets event bindings .
            • Warn if dimensions are warnings .
            • Returns the desired size of the draggable element .
            • Validate the draggable element .
            • Determine furthest distance between the given candidates .
            • Checks if the element is interactive
            • Determines if a drag item can be started .
            • get a common test result
            Get all kandi verified functions for this library.

            react-beautiful-dnd Key Features

            No Key Features are available at this moment for react-beautiful-dnd.

            react-beautiful-dnd Examples and Code Snippets

            No Code Snippets are available at this moment for react-beautiful-dnd.

            Community Discussions


            How to pass each component id
            Asked 2022-Apr-03 at 08:24

            I want to implement dragging components (beautiful dnd) so that the user can swap them. But for this, each component must have an id, as I understand it. But I do not know how to do it



            Answered 2022-Jan-16 at 11:52

            If I get this correctly you need to have some kind of id for every component in your case:



            Why does the return value change when using React-icon component for my button?
            Asked 2022-Apr-02 at 00:57

            I want to delete a list, and style that button with an icon. If i just have "delete" as my button, my onClick returns the ID as expected. However, when I try to use a component for my button, it returns a weird object.

            I tried using different elements instead of a and different icon libraries, but it results in the same behavior. This is how I was importing the component and I am using styled-components if that matters



            Answered 2022-Apr-02 at 00:57

            First thing, the element should accept only certain types of nested elements: MDN ref

            Permitted content Phrasing content but there must be no Interactive content

            That said, your problem is that nested elements of inherit its event listeners, so when you nest the react-icon Component ( an I guess ), and click on the button, you basically are dispatching the click event on the svg and not on the . You can address the issue with a simple css fix:



            Auto Scroll Horizontal Mui TabList on Drag with react-beautiful-dnd
            Asked 2022-Mar-30 at 05:15

            I have tried to implement Drag & Drop feature in Mui TabList using react-beautiful-dnd. The dnd is working fine but, I am facing an issue making horizontal list of tabs auto scroll while dragging when there are too many tabs to fit in the screen and the variant prop of Mui TabList is scrollable. See this codesandbox example - This seems like a standard use case, so there must be some solution. Please refer my code below -




            Answered 2022-Mar-30 at 05:15

            This can be solved by - in /components/DraggableTabsList.jsx wrap the Droppable inside a div container with style {display:"flex", overflow:"auto"}. The new code would look like -



            React beautiful drag and drop doesn't work with Material UI component
            Asked 2022-Mar-28 at 09:48

            I've tried to make a horizontal list of MUI buttons draggable with react beautiful drag and drop. But it doesn't seem to be working.

            I wrapped up my buttons with , ,and tags. Here's the code.



            Answered 2022-Mar-28 at 09:48

            You can see in this issue, Buttons cannot be used as custom drag handles

            So in your case, you have to put a div outside buttons. And also, draggableId should be string.



            Changing the list of items doesn't rerender the component when using react-beautiful-dnd
            Asked 2022-Mar-12 at 02:32

            I'm using react-beautiful-dnd to let the user choose the options using drag and drop.

            However, the component doesn't seem to re-render when the order of the options is changed. (I've tried console logging it, and it appears to have changed.)

            This is the onDragEnd method:



            Answered 2022-Mar-12 at 02:32

            You are rendering optionalCourses in the DND but you are updating the list state. You should render the list instead.



            How to figure out the types of JavaScript libraries for TypeScript with example?
            Asked 2022-Mar-05 at 20:07

            I have the following code I am trying to port to TypeScript:



            Answered 2022-Mar-05 at 19:50

            I looked at the docs and you need to pass a React Component as the first argument of the styled function. In your example you are passing a function component without defining the type of the "props". But the type of "props" default to {} as you can see here. That's why you are getting the error.

            So you simply need to provide the type of your props like so:



            How to drag and drop multiple words in react dnd
            Asked 2022-Feb-23 at 07:11

            How can I drag several words from a sentence by highlighting the selected words and being able to drag and drop from one text box to another using react-beautiful-dnd?



            Answered 2022-Feb-23 at 07:11


            react-beautiful-dnd doesn’t work properly with react-virtualized Table component
            Asked 2022-Feb-18 at 02:06
            Expected behaviour

            Row should get dragged to its destination index when dragged from top to bottom and vice versa with DnD animation.

            Actual behaviour

            Row doesn’t get DnD when dragged from bottom to top index. Top to bottom drag works but the item is added after the last page index and not to the destination index. DnD animation seems not to be working as well.

            Steps to reproduce

            You can refer this sandbox to replicate the issue.

            Case 1: Top to bottom drag

            1. Try to drag and the row from top to bottom index
            2. you will see the row gets dragged to last index of the page not the destination index

            Case 2. Bottom to Top drag

            1. Try to drag and the row from bottom to top index
            2. you will observe the rows doesn’t get dragged and onDragEnd is not called.

            The same code works with react-virtualized's List component but not the Table component.

            What version of React are you using?


            What version of react-beautiful-dnd are you running?


            What version of react-virtualized are you running?


            What browser are you using?



            I have created this sandbox to replicate the issue. You can run this to check the issue.


            Can anyone take a look at the sandbox and help me out? Let me know if you need another info!


            So today, I debug this more and made some progress. Looks like the issue was with rowRenderer implementation. There was an extra wrapper div on top of defaultRowRenderer's dom. I was able to solve the issue partially. Here is the new sandbox link with the updated code.

            Now, there's one issue left is scroll doesn't work while dragging the row. Any pointers how can I fix this?



            Answered 2022-Feb-18 at 02:06

            Finally, solved the issue (not sure if this is the right way). The solution was to pass ref as react virtualized scrolling wrapper div instead of react-virtualized main wrapper div.

            I had updated the above sandbox with the fix.




            How to reorder array sequence in draggable list
            Asked 2022-Feb-16 at 15:06

            I'm using the react-beautiful-dnd component to create a draggable list. I get backend data sorted by the sequence field. After dragging and dropping the item, I use the reorder function to create a new list. This is where I'm having problems! I need to create a new array by reordering the 'sequence' field based on newItems to save the new string in the backend. How can I do this?

            Initial result



            Answered 2022-Feb-15 at 22:49

            Try using .sort with your sequence property. Something like this:



            React Beautiful DnD- set the drag handle to be ONLY the list item MARKER
            Asked 2022-Jan-27 at 08:38

            I am using React Beautiful DnD to create a nested list. I know this is not supported by the library, but I've seen plenty of workarounds and my use-case is relatively simple (no dragging sub-list elements between parent lists; sub-list elements can only be dragged within their respective sub-list).

            The issue is as follows: trying to drag elements from the nested list sometimes drags the parent list elements instead. (I just made a long post documenting my problem here.)

            I haven't gotten any responses yet, so I stared thinking about other ways to potentially solve the problem. I realized one solution could be choosing only a specific area of each list element that can be clicked to drag, and making sure this area does not overlap between the parent/nested lists.

            Seeing that this is possible here, I simply need to add {...provided.dragHandleProps} to the element that I want to serve as the drag handle.

            However, my nested list is built using two instantiations of a reusable DnDList component that I wrote, so it gets a little more complicated. Rather than trying to figure out how to specify a drag handle as props, I'd like to just set the drag handle to be list item marker for each list item (the '1', '2', '3', etc next to each list item).

            How can I add {...provided.dragHandleProps} to the li::marker elements of my list?



            Answered 2021-Oct-12 at 17:59

            Here's how I figured it out:

            I ultimately used CSS to turn off the list item marker (listStyle: "none"), then wrapped each DnDList item in a flex container with a clickable drag icon that I manually placed on the left of the list item (first sibling in the flex container).

            I also overlayed an invisible div over the drag icon, and placed the {...provided.dragHandleProps} here. It looked like this:


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install react-beautiful-dnd

            We have created a free course on 🥚 to help you get started with react-beautiful-dnd as quickly as possible.


            This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and have no current plans for further feature development or improvements. It will continue to be here on GitHub and we will still make critical updates (e.g. security fixes, if any) as required, but will not be actively monitoring or replying to issues and pull requests. We recommend that you don’t raise issues or pull requests, as they will not be reviewed or actioned until further notice.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone atlassian/react-beautiful-dnd

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link