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

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,
                                                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

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

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

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

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