Help With HeadlessUI bindings

Looking for help on binding the as prop throughout the HeadlessUI package.

The prop can take an element or it can take a string. I am unsure what this type would be, I have tried the following:

module Child = {
    @module("@headlessui/react") @react.component @scope("Transition")
    external make: (
      ~enter: string=?,
      ~enterFrom: string=?,
      ~enterTo: string=?,
      ~leave: string=?,
      ~leaveFrom: string=?,
      ~leaveTo: string=?,
      ~as_: 'as_=?,
      ~children: 'children,
    ) => React.element = "Child"
  as_={React.Fragment} <-- ERROR
  enter=%tw("ease-out duration-300")
  leave=%tw("ease-in duration-200")
    className=%tw("fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity")


in the binding .res

module Transition = {
  @module("@headlessui/react") @react.component
  external make: (
    ~\"as": React.element=?,
    ~children: React.element,
    ~enter: string,
    ~enterFrom: string,
    ~enterTo: string,
    ~leave: string,
    ~leaveFrom: string,
    ~leaveTo: string,
    ~show: bool,
  ) => React.element = "Transition"

then you can use raw for the fragment

  let fragment = %raw(`React.Fragment`)

//...and in the JSX

Thanks so much @jorge, I was so close! I actually almost went this route but figured there might be a more robust way.

1 Like

I might be drawing a blank, but is is possible to get something similar to the React.element | string typing for the prop in rescript?

I have it working with:

@module("@headlessui/react") @react.component
  external make: (
    ~_as: 'asType=?,
    ~children: 'children,
    ~className: string=?,
    ~open_: bool=?,
    ~onClose: unit => unit=?,
  ) => React.element = "Dialog"
1 Like