How to pass react component defined in rescript as function/class component to typescript or js side

1

Hi all

I have a typescript react component , one of its props accepts function/class component, ,
I have written rescript react bindings for it.

My attempts in passing such a prop from rescript side

Definition of listitem

module ListItem = {
@genType.import(("./List", "ListItem")) @react.component

  external make: (
    ~icon: React.component<
      {
        "type": option<Icon.Icon.iconType>,
        "className": option<string>,
        "domRef": option<Icon.reactSvgElementRef_>,
        "label": option<string>,
        "onDarkBg": option<bool>,
        "size": option<Icon.Icon.iconSizeType>,
      }>=?,
    ~onClick: unit => unit=?,
 ) => React.element = "ListItem"
}

Icon module definition on rescript side

module Icon = {
 @genType.import(("icons", "Icon")) @react.component
    external make: (
      ~size: iconSizeType=?,
      ~className: string=?,
      ~domRef: reactSvgElementRef_=?,
      ~label: string=?,
      ~onDarkBg: bool=?,
      ~\"type": iconType=?,
    ) => React.element = "Icon"
  }
}

Usage on the rescript side

<ListItem key={Belt.Int.toString(i)} onClick={onClick} icon={Icon.make}>

This seems to satisfy the rescript compiler atleast

Js output

React.createElement(ListItem.make, {
                                                icon: Icon.make,
                                                onClick: onClick,
                                                children: service.name.valueDefault,
                                                key: String(i)
                                              })

But the js side is not able to resolve it properly, I mean its treating the passed rescript react component as Dom elements, getting the following errors

index.js:1 Warning: React does not recognize the `titleProps` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `titleprops` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Found documentation Component Types but no sample implementation found

Thanks for your help

2

Hi could anyone help me with the above issue please. I’m kinda stuck

3

I never played with genType, but looking at the docs, it seems you don’t need @react.component for the Icon binding.

4

How do the generated bs.js and gen.js files look like?

5

Hi @ryyppy

Sorry for delay in response, I was sick

here are the generated gen.tsx
`

export type Icon_iconSizeType = "default" | "small" | "large";

// tslint:disable-next-line:interface-over-type-literal
export type Icon_iconType = 
   "default"
  | "action"
  | "error"
  | "neutral"
  | "success"
  | "disabled";

  // tslint:disable-next-line:interface-over-type-literal
  export type Icon_iconComponentType = React.ComponentType<{
    readonly className?: string; 
    readonly domRef?: reactSvgElementRef_; 
    readonly label?: string; 
    readonly onDarkBg?: boolean; 
    readonly size?: Icon_iconSizeType; 
    readonly type?: Icon_iconType
}>;


export const ListItemTypeChecked: React.ComponentType<{
  readonly contentProps?: object_; 
  readonly controlIconLabel?: string; 
  readonly disabled?: boolean; 
  readonly external?: boolean; 
  readonly href?: string; 
  readonly icon?: Icon_Icon_iconComponentType; 
}

`

The generated .bs.js
var make$5 = OpuxGen.ListItem; var ListItem = { make: make$5 };