useDrag Ref type error with NextJS and react-dnd

It seems that useDrag gives us a function that returns a React Element. This worked for me:

const [{ isDragging }, drag] = useDrag(...); { drag( <div> .... </div> )} 

Or if you want your entire component to be draggable, just

return drag( <div>...</div> ) 

Use the same approach for const [{ isDragging }, drop] = useDrop(...)

It's worth noting that this is not a documented change to the API and I'm not sure if there are any implications of this approach, but so far I've not had any issues.

Just make sure the drag/drop ref isn't the direct argument to the ref. Instead, pass a callback to the ref prop and call the drag/drop ref with the param of the ref callback.

const [{ isDragging }, dragRef] = useDrag(() => ({ ... })); <div ref={el => { dragRef(el) }} > .... </div> 

This works in React-dnd (16.0.1), React (19.1.0) and Next (15.5.4)...

const [ collected, drag] = useDrag(() => ({ ... collect: (monitor) => ({ isDragging: monitor.isDragging(), }), })); return ( <div ref={drag} style={{ opacity: isDragging ? 0 : 1, }} > <p>Content</p> </div> ); ... 

...but there is a type warning:

TS2322: Type ConnectDragSource is not assignable to type Ref<HTMLDivElement> | undefined Type ConnectDragSource is not assignable to type (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) Type ReactElement<unknown, string | JSXElementConstructor<any>> | null is not assignable to type void | (() => VoidOrUndefinedOnly) Type null is not assignable to type void | (() => VoidOrUndefinedOnly) 

I read this as just being a conflict over null != void | (() => VoidOrUndefinedOnly.

For better or worse I wasn't worried about that, so I silenced the type warning:

ref={drag as unknown as Ref<HTMLDivElement>}