Passing React.Fragment as a prop

1

I’m running into an issue trying to use HeadlessUI’s as prop that they have on some components. Most cases only require the default arg of div passed as a string, which is fine. But some cases require passing React.Fragment. See here.

I guess I don’t understand the React types well enough yet, but what would that type be on a binding?

Thanks :grinning_face_with_smiling_eyes:

3

All of these use _as: string=? which is fine for passing an HTML tag through, such as: _as="div"

The case I’m talking about is passing a React.Fragment, meaning the type will have to be something like: _as: React.component ← this is the part I’m not sure about.

And when I try to use React.Fragment in any argument it just says: “The variant constructor React.Fragment can’t be found.” I understand the type error, but not sure how one would pass React.Fragment as a “component” argument.

But thanks though! :slight_smile:

4

There are some examples of binding to mdxjs in rescript-lang.org implementation, which might help. I am not really diving into your question, but just noting relevant resources in case they answer your question.

5

I answered a similar question here: Help with binding / currying - #15 by mellson

Maybe this helps?

1 Like
6

Aaaah the answer is quite cool, thought it might be a fun one! :sweat_smile:

From the docs: A React component is a *function* describing a UI element that receives a props object as a parameter

Making my full binding:

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

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

And then usage:

_as={React.Fragment.make}

It seems to work :slight_smile:

1 Like
7

Ok this looks like the better solution, thanks! :grinning_face_with_smiling_eyes:

1 Like