Help With HeadlessUI bindings

1

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"
  }

<HeadlessUI2.Transition.Child
  as_={React.Fragment} <-- ERROR
  enter=%tw("ease-out duration-300")
  enterFrom=%tw("opacity-0")
  enterTo=%tw("opacity-100")
  leave=%tw("ease-in duration-200")
  leaveFrom=%tw("opacity-100")
  leaveTo=%tw("opacity-0")>
  <HeadlessUI2.Dialog.Overlay
    className=%tw("fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity")
  />
</HeadlessUI2.Transition.Child>

IMG_5062
IMG_50621162×866 88.3 KB

Thanks!

2

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
  <HeadlessUi.Transition
        \"as"={fragment}
        show={props.open_}>
//...
2 Likes
3

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
4

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?

5

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