formkit / drag-and-drop

Home Page:https://drag-and-drop.formkit.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Types for parentRef

mire-toctoc opened this issue · comments

Does the drag and drop functionality just accepts the use of <ul> and <li> tags?

I'm currently having an issue related to the parent definition, where the error Type 'MutableRefObject<HTMLUListElement>' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 290 more. is present. I've tried different definition types for my parentRef, but is not working. Before this definition, I was trying to use a <div>, but it has the same problem.

Please, give us more information about expected types in both

useDragAndDrop

and

dragAndDrop

hooks, so users can avoid having this kind of issues

My implementation:

const parentRef = React.useRef() as React.MutableRefObject<HTMLUListElement>;
	const [imagesList, setImagesList] = useState(images)
		dragAndDrop({
			parent: parentRef,
			state: [imagesList, setImagesList]
			})

you can use parent: parentRef, but then you're still going to have issues afterwards with the line below it:

Object literal may only specify known properties, and 'state' does not exist in type 'DragAndDrop<unknown>'

Personally, I've never gotten this to work properly with React unless I use nothing but the demo ul/li implementation with the useDragAndDrop hook. The only documentation otherwise is a 3 line snippet that doesn't even show useful usage, so I'd recommend @hello-pangea/dnd library instead for now.