Rescript-react trouble finding drag and drop bindings

,
1

Hi everone,

I’m trying to implement some drag and drop functionality using rescript-react but I can’t really figure out how to get at the datatransfer object (HTML Drag and Drop API - Web APIs | MDN).

The event supplied to a dragstart handler is a ReactEvent.Mouse.t but I can’t find any way to get at the datatransfer object (or how to subsequently use setData, etc, and everything that follows in implementing dnd). I couldn’t find anything searching the rescript-react repo. I assume it would be here (or in that file) if it existed? rescript-react/ReactEvent.res at master · rescript-lang/rescript-react · GitHub

I found something for it in the reason-react repo, though: reason-react/ReactEvent.rei at main · reasonml/reason-react · GitHub

Are bindings for React drag and drop stuff missing from rescript-react or am I too much of a beginner to be able to find/understand them? :slight_smile:

I did find drag and drop bindings in the rescript-webapi repo, but I don’t know if or how I could use those given that what I have is a ReactEvent.Mouse.t

Thanks a lot in advance!

2

We use GitHub - shakacode/rescript-dnd: Drag-n-drop for @rescript/react at Carla

2 Likes
3

Thanks for the tip! It looks like a really nice library, and with good docs! :slight_smile:

I added a small hacky binding myself to my code just to bridge rescript-react and rescript-webapi:

@get external dataTransfer: ReactEvent.Mouse.t => Dom.dataTransfer = "dataTransfer"

I’m still a beginner so it might take me a while, but I’ll probably replace my own dnd stuff with rescript-dnd in the future, as it looks very solid. Thanks again! :slight_smile:

2 Likes
4

IMO, this is a completely valid approach, nothing hacky about it.

1 Like