Hi Dan,

Just a quick one - I'm trying to use my own component that has react-dnd as a dependency in another app which itself uses react-dnd so the error above expected. In this case, what would be the best way to fix this?

Since the other component is my own, I can remove the DragDropContext call from while exporting the component but then that sacrifices the re-usability of the component. What do you advise?

Is there any reason why the CustomDragLayer for me is giving me bad performance? Its like theres low fps, or rather, the arbitrary object that I am dragging around is lagging and not looking smooth

Somebody was going to ask eventually! The new hooks API could possibly help here. I think most of the API can pretty much stay the same, with the HOC mapping directly into a hook.

I do wonder if we can replace connectDragSource and connectDropTarget with just passing in the value of useRef. It could definitely make stuff cleaner if that's possible!

I want to restrict allowed files extension and need to know what files user is dragging, but console throws warning: NativeDragSources.js:61 Browser doesn't allow reading "files" until the drop event. So what is the best way of checking file extension or dragging files count before dropping it on drop target?

In the past week, I closed a bunch of issues and pushed out a few releases but it’s hard to do this in isolation from understanding the user needs. This project has many stars but when there is an issue, it’s hard to say how many people it impacts, and why we don’t get more pull requests.

The codebase is not documented and can be intimidating to outsiders, which I understand well. Is this the reason why we don’t get more pull requests for fixes? Or is it because the project is not used as widely as stars lead me to believe?

I would like to ask the current users of React DnD to check in here to say a few words.

• What products are you using React DnD in?
• How useful do you find it?
• How often do you have issues with it, and how frustrating are they?
• Which features do you care about?
• Can you attach a couple of screenshots of your product?

This will help me understand how this project fits in the ecosystem, and how much of my free time is worth allocating to it. Thanks!

Hi there. We are getting this error (although the functionality is okay and works fine). Do you have any idea how it can happen? couldn't figure it out from the source code.

After upgrading to Chrome 59, react-dnd no longer works. After a bit investigating, it looks like Chrome no longer triggers "dragend" event which leads to react-dnd misunderstand when I try to drag the second item/time Anyone experience the same issue?

Not all of us have the luxury of using newfangled ES7 syntax, it would be a lot of help for newcomer information overload if there could be a couple working examples that didn't introduce all these new language features (especially experimental features like ES7 decorators) in the examples. The usefulness of examples is diluted when cluttered with experimental language features.

Edit from maintainer: please track them here: https://github.com/vkbansal/react-dnd-es5-examples

There is a common pattern that is hard to implement with native drag and drop: dragging multiple elements. While selection mechanics might vary from app to app (cmd+clicking, checkboxes, predefined groups), but it would be nice to at least make it possible to support this scenario.

Because multiple dragged items may not be siblings in DOM and setDragImage(element, x, y) is pretty much insane and hasn't gotten any better, we won't burden ourselves with trying to render several elements in drag preview at once.

How can we help implement this scenario, if we can't show a "multiple" drag preview?

In a way, this scenario is already possible: consumers can manually keep track of selected elements, set dragPreview to some kind of generic placeholder Image and react appropriately to the dropping of (as far as business logic is concerned) several elements.

However there is currently no supported way for one element to know that it's part of a group that's being dragged. From react-dnd's point of view, if we drag something, this component gets getDragState(type).isDragging = true, but other components don't. From your app point of view, if you support multiple selection, you want all logically "selected" items to be aware that they're being dragged, even if only one of them is being actually "DOM-dragged".

What we need is a way for components to tell react-dnd that, “hey, although onDragStart was received by another component, I want to pretend that I'm being dragged too, and have my getDragState(type) mirror dragged component's getDragState(type), and have my endDrag(didDrop) called too so I could do my stuff”.

How would components opt into that?

React 0.13 will allow pure ES6 classes as components. React DnD currently relies on mixins.

We should find a way to port current API to a more generic primitive that can be used equally well from our mixins and ES6 classes. Ideally mixins will just be a sugar over more basic functionality.

This should inform the design of https://github.com/gaearon/react-dnd/issues/103 so we don't have to redo the API once again later.

Fantastic library! Thanks for all your hard work in putting it together. I have a quick question: is it possible to customize the cursor such that during a drag operation, the cursor is always set to the same thing (specifically I want to set it to the dragging icon)?

In other words, regardless of whether you are over a drop zone or not, the cursor remains the same. This is similar to how Trello has the cursor while dragging a note, for example.

Thanks in advance!

Describe the bug In my code I have vertical stack of sections which are drop targets. Once the page is rendered, I deleted one of the section (not the last one). Now I drag and drop the object, to the section next to the deleted section. But the actual drop happens on the deleted section. Hover works fine and shows the right drop target. It is easy to reproduce. Sample code attached.

Reproduction

Code attached

=================

import { useState } from "react"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; import { useDrag, useDrop } from 'react-dnd'

const data = [ { name: 'Section 1', rows: [{ name: 'Section 1, Row 1' }, { name: 'Section 1, Row 2' }, { name: 'Section 1, Row 3' }] }, { name: 'Section 2', rows: [{ name: 'Section 2, Row 1' }, { name: 'Section 2, Row 2' }, { name: 'Section 2, Row 3' }] }, { name: 'Section 3', rows: [{ name: 'Section 3, Row 1' }, { name: 'Section 3, Row 2' }, { name: 'Section 3, Row 3' }] }, { name: 'Section 4', rows: [{ name: 'Section 4, Row 1' }, { name: 'Section 4, Row 2' }, { name: 'Section 4, Row 3' }] }, ]

function Row(props) {

const [{ isDragging }, drag] = useDrag(() => {

    return {
        type: 'TableRow',
        item: props.row,
        collect: monitor => ({
            isDragging: !!monitor.isDragging(),
        }),
        end: (item, monitor) => {
            if (monitor.didDrop()) {
                console.log('Dropped');
            }
        }
    }
})

return (
    <div  ref={drag} style={{ margin: 4, padding: 4, border: '1px solid #CCC' }}>
        <div style={{ color: '#999' }}>{props.data.name}</div>
    </div>
)

}

function Section(props) {

const [{ isOver, droppedItem }, drop] = useDrop(() => {
    return {
        accept: 'TableRow',
        drop: (v, c) => {
            _droppedTo(v);
        },
        collect: monitor => ({
            isOver: !!monitor.isOver(),
            droppedItem: monitor.getItem()
        }),
    }
}, [])

const _droppedTo = (v) => {
    console.log("Dropped to "+props.section.name);
}

if(isOver) {
    console.log("Hovering on "+props.section.name);
}

return (
    <div ref={drop}  style={{ margin: 10, padding: 10, boxShadow:isOver ? '1px 1px 3px rgba(0,0,0,0.4)' : '',
     border: isOver ? '2px solid #00ff00' : '1px solid #DDD' }}>
        <div style={{ Color: '#0000FF', marginBottom: 5 }}>{props.section.name}</div>
        <div>
            {props.section.rows.map((row, key) => {
                return (
                    <Row key={key} data={row} />
                )
            })}
        </div>
    </div>
)

}

export default function DndTestCase(props) {

const [state, setState] = useState({
});


const _onDelete = () => {
    data.splice(2, 1);
    setState({ ...state });
}


return (
    <DndProvider backend={HTML5Backend}>
        <div style={{ width: '100%', height: '100vh', backgroundColor: '#FFF', padding: 20 }}>
            <div>
                <div onClick={_onDelete} style={{
                    cursor: 'pointer', border: '1px solid #CCC', justifyContent: 'center', alignItems: 'center', display: 'flex',
                    width: 200, height: 30, backgroundColor: '#EAEAEA', color: '#000'
                }}>Delete Section</div>
            </div>
            {data.map((section, key) => {
                return (
                    <Section key={key} section={section} />
                )
            })}
        </div>
    </DndProvider>
)

}

=================

Steps to reproduce the behavior:

1. Click the 'Delete Section',. which will delete section 3
2. Drag a row from section 1 and drop to section 4.
3. The drop happens on deleted section 3. See the console output

Expected behavior Drop should not happen on deleted node. It should be same as the node shown on hover.

Screenshots Code attached Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

The current dropEffect example shows how to change dropEffect on the drag source based on the drag source itself (https://react-dnd.github.io/react-dnd/examples/customize/drop-effects). Is there a way to dynamically change the dropEffect based on the target? For example, I have 2 drop target boxes. If I drag an item to Box 1, it should show Add effect. If I drag an item to Box 2, it should show Copy effect.

This will make the packages compatible with both commonjs and esm.

The method for creating a esm + cjs package, which is compatible with current tooling is explained here.

This would for example resolve these issues: https://github.com/react-dnd/react-dnd/issues/3443 https://github.com/react-dnd/react-dnd/issues/3454 https://github.com/react-dnd/react-dnd/issues/3521 https://github.com/react-dnd/react-dnd/issues/3518

and plenty more.

I've not bumped the version in the packages.

I've tested this PR by publishing these packages to our private registry. We use typescript and ESM as well as jest and commonjs and this resolved the issues.

Hi there,

I am not sure if this is already doable with React-dnd or not. Basically the component which I drag is not the final component to be dropped in the target. How do you change component after dropping on the target?

Saying I drag a button but when I drop I want to drop specific component instead of a button

thanks

Is your feature request related to a problem? Please describe.

see my comment here https://github.com/react-dnd/react-dnd/issues/3423#issuecomment-1322347558

https://github.com/react-page/react-page cannot be used in nextjs 13.

Using react-dnd version 16 is also not possible, as it is pure ESM and that can only be used by packages that are also pure ESM. Which in turn is not feasible yet as too many packages are not yet compatible with ESM (e.g. @mui)

Describe the solution you'd like

either ship both ESM and commonjs or backport the react 18 fixes for non-esm version (15)

Describe alternatives you've considered

I spent 2 days migrating react-page to full ESM, but the world is not yet ready for ESM - unfortunatly. Its a mess.

Alternative is that we fork react-dnd.