I’ve bound to react-hot-toast like this:
module HotToast = {
type t
module Toaster = {
@react.component @module("react-hot-toast")
external make: unit => React.element = "Toaster"
}
@module("react-hot-toast")
external make: t = "default"
@send external success: (t, string) => unit = "success"
}
and then use it like:
Lib.HotToast.make->Lib.HotToast.success("Woop!")
Hello! Welcome.
Question 1
Currently there’s no way to compile to named import beside default import since semantically:
import * as Toast from 'file'; Toast.error()
fulfills the same purpose as:
import {error} from 'file'; error()
Though arguably the former looks nicer…
However, I have a hunch that this might be what you want:
type myToastType
@module("react-hot-toast") external toast: myToastType = "toast"
@send external error: (myToastType, string) => unit = "error"
error(toast, "some error")
Check the output here.
Question 2
On a higher level: nothing. Because there’s no such thing as curried call in JS. The fact that externals compile to clean uncurried code is a special case actually.
Edit: believer beat me to it. But yes, if you want to also bind to Toaster as a default export, then add that too. Basically, use @send.
I’ve settled on a slight variation of what you have @believer.
// HotToast.res
type t
module Toaster = {
@react.component @module("react-hot-toast")
external make: unit => React.element = "Toaster"
}
%%private(
@module("react-hot-toast")
external make: t = "default"
@module("react-hot-toast") external privateSimple: string => unit = "toast"
@send external privateSuccess: (t, string) => unit = "success"
@send external privateError: (t, string) => unit = "error"
)
let simple = msg => privateSimple(msg)
let success = msg => privateSuccess(make, msg)
let error = msg => privateError(make, msg)
This let’s me call it like this HotToast.success("Woop!") and also expose the “default” version with HotToast.simple("Simple Woop!").
Again thanks for your help 
Hah this is what I like. A better answer tailored to the situation. Thanks @believer.
Though be careful not to have too many module wrappings. It gets noisy.
A follow up question. Now I’m trying to bind to the headlessui package from TailwindLabs.
I’m trying to use a named export from their package called Transition.
Normally I would import it like this: import { Transition } from '@headlessui/react' and then just use the Transition component in my markup.
So I’m naively trying this approach:
// HeadlessUI.res
module Transition = {
@react.component @module("@headlessui/react")
external make: unit => React.element = "Transition"
}
But when I then use it in my markup like so:
<HeadlessUI.Transition>
<div>{React.string("hello")}</div>
</HeadlessUI.Transition>
I get an error from the compiler:
The function applied to this argument has type (~?key: string) => {}
This argument cannot be applied with label ~children
So not really sure how to go about fixing this 
You forgot to define the ~children label for your make function:
module Transition = {
@module("@headlessui/react") @react.component
external make: (
~show: bool,
~enter: string=?,
~enterFrom: string=?,
~enterTo: string=?,
~leave: string=?,
~leaveFrom: string=?,
~leaveTo: string=?,
~children: React.element, // <-- this one
) => React.element = "Transition"
}
On another note: I recently used HeadlessUI for rescript-lang.org … here is the relevant diff: https://github.com/rescript-association/rescript-lang.org/pull/301/files#diff-0c189f9d52395944c88299ce525564024d32a5bd0f04f83f68e40dfd58381b1cR1
Wow, thanks. That makes sense!
This got me a long way. Thank you very much!
The next blocker I’m facing is how to map the Transition.Child from the package.
I can see that you don’t use it yet, so there’s not a solution I can steal 
The TransitionChild is not exported so again I’m unsure how to go about this.
My first approach was:
module Transition = {
@module("@headlessui/react") @react.component
external make: (
~show: bool,
~enter: string=?,
~enterFrom: string=?,
~enterTo: string=?,
~leave: string=?,
~leaveFrom: string=?,
~leaveTo: string=?,
~className: string=?,
~children: React.element,
) => React.element = "Transition"
module Child = {
@module("@headlessui/react") @react.component
external make: (
~enter: string=?,
~enterFrom: string=?,
~enterTo: string=?,
~leave: string=?,
~leaveFrom: string=?,
~leaveTo: string=?,
~role: string=?,
~onClick: ReactEvent.synthetic<'a> => unit=?,
~className: string=?,
~style: ReactDOM.Style.t=?,
~children: React.element,
) => React.element = "Child" // Have also tried "Transition.Child" and "TransitionChild"
}
}
But I get the error Attempted import error: 'Child' is not exported from '@headlessui/react' (imported as 'React$1').
I’m guessing I need to change the type returned from Transition element. But how do I create a type that will allow Transition itself to be a React.element and also have a Child which is a React.element?
Yeah that took me a while as well, since the way headlessUI nests components in their exports looked weird to me.
You need the @scope("Transition") decorator here:
module Child = {
@module("@headlessui/react") @scope("Transition") @react.component
external make: (
~enter: string=?,
~enterFrom: string=?,
~enterTo: string=?,
~leave: string=?,
~leaveFrom: string=?,
~leaveTo: string=?,
~role: string=?,
~onClick: ReactEvent.synthetic<'a> => unit=?,
~className: string=?,
~style: ReactDOM.Style.t=?,
~children: React.element,
) => React.element = "Child"
}
Thank you very much. I was wondering what the @scope was for.
I’m so grateful for all the help in this thread. What a welcoming and friendly community 
In case you don’t know: You can find all our interop decorators (+ examples) in our syntax discovery widget (feel free to open an issue on the docs issue tracker in case anything you find there is unclear)
We appreciate the questions / threads! Keep it going 
Thanks for the link, I didn’t know that 
With my new knowledge of scope I was able to create, at least for me, a cleaner version of the HotToast binding:
// HotToast.res
module Toaster = {
@react.component @module("react-hot-toast")
external make: unit => React.element = "Toaster"
}
@module("react-hot-toast") external toast: string => unit = "toast"
@module("react-hot-toast") @scope("toast") external success: string => unit = "success"
@module("react-hot-toast") @scope("toast") external error: string => unit = "error"
Hi @ryyppy in the link to your binding to HeadlessUI you have this thing:
@module("@headlessui/react") @react.component
external make: (
~_as: [#div]=?,
~className: string=?,
~children: state => React.element,
) => React.element = "Menu"
I’m curious as to what the type [#div] is? and how you use it? I can’t seem to figure out where to find more info on this.
Do you know how to type the optional _as to allow for it to receive a React.Fragment?
Finally, have you stopped using HeadlessUI again, if so why?
Thanks in advance
This is a type annotation for a polymorphic variant.
Usage would look like this: <HeadlessUICom _as=#div> ... </HeadlessUIComp>
Looks like HeadlessUI defines as as a union type (either "div" | ... | React.fragment). ReScript doesn’t support polymorphic values too well, so you need a helper module to unify these types.
Kinda like this:
type state
module As: {
type t
let fragment: t
let dom: [#div] => t
} = {
type t
@module("react")
external fragment: t = "Fragment"
external dom: [#div] => t = "%identity"
}
module MyComp = {
@module("@headlessui/react") @react.component
external make: (
~_as: As.t=?,
~className: string=?,
~children: state => React.element,
) => React.element = "Menu"
}
let _ = <MyComp _as=As.fragment> {(_) => <div/>} </MyComp>
let _ = <MyComp _as=As.dom(#div)> {(_) => <div/>} </MyComp>
This is just an example, there are probably cleaner ways to represent this.
Still using it for the upcoming PlaygroundWidget. Not planning on switching, except I am reimplementing the whole thing in pure Rescript.
Hope this helps!
Incredible, thanks for such a detailed example.
This was very helpful 
Hmm, nobody seems to have binding for Headless Dialog…I keep getting this:
Uncaught Error: You have to provide an open and an onClose prop to the Dialog component.
This is my binding:
@react.component @module("@headlessui/react")
external make: (
~children: React.element=?,
~_as: string,
~className: string=?,
~onClose: bool => unit,
~_open: bool,
) => React.element = "Dialog"
Any idea why? Or is there a complete set of HeadlessUI bindings somewhere 
The best way to debug this is to look at the JS output. Did your program actually compile and yield the JS output you’d expect? Does it look exactly like in the HeadlessUI docs and still doesn’t work?
here is my binding for headless Dialog
module Dialog = {
@module("@headlessui/react") @react.component
external make: (
~\"as": string,
~children: React.element,
~className: string=?,
~onClose: 'a => unit,
~static: bool=?,
~\"open": bool,
) => React.element = "Dialog"
module Overlay = {
@module("@headlessui/react") @scope("Dialog") @react.component
external make: (~className: string=?) => React.element = "Overlay"
}
module Title = {
@module("@headlessui/react") @scope("Dialog") @react.component
external make: (~className: string=?, ~children: React.element) => React.element = "Title"
}
}
Haha, my bindings for Dialog were fine…I must’ve copy pasted my binding for Dialog over to Transition because my Transition binding was going to “Dialog” which is why my error kept coming up as Dialog 
Thanks though!