Rendering Fable React components in a TypeScript React app

I asked this on Gitter, but didn’t get any bites. Hopefully this is the correct place to ask.

I’ve got a question on interop between an NPM library of React components I’d like to port to Fable and using said library from Fable and TypeScript apps.

Say I’ve created a stateless functional component in TypeScript like this:

const MagicButton : SFC<{buttonType: string}> = (props) =>
  <button className={props.buttonType}>
    {props.children}
  </button>

I would like to be able to reimplement it in Fable and use it from both F# and TypeScript apps. I’d like to keep the children and props separate in Fable apps as it reads a lot better, but not lose the ability to use it in JSX.

I’ve tried something like

let Button props children =
  button [ Class props.buttonType] children

which works well in Fable, but does not render children in TypeScript. This makes sense because in React children are passed on props and not as a second parameter. I’ve hacked together something that works:

let UnboxButton props children =
  let pChildren = 
    match (unbox props?children) with
      | Some c -> c
      | _ -> []
  button [ Class props.buttonType ] (unbox pChildren @ children)

which does what I want (renders children in both scenarios), but the code feels hacky and I would rather not use something like this.

Is there a way I can create React components in a Fable project that keep the clean props children signature but still consume them from TypeScript or JavaScript?

[alfonsogarciacaro]

Interesting, so far I haven’t used a React Function component accepting children. It’s a bit more verbose but using the class syntax probably works better here:

type [<Pojo>] MyButtonProps = { buttonType: string }

type MyButton(props) =
    inherit React.Component<MyButtonProps, obj>(props)
    override this.render() =
        button [Class this.props.buttonType] (List.ofArray this.children)

You should be able to use this normally with JSX.

import { MyButton } from "./File.fs"

<MyButton buttonType="foo">...</MyButton>

[timothymclane]

The class syntax isn’t so bad and does what I need. I have a strong preference toward functions instead of classes for React components, especially for presentational components that don’t need lifecycle methods or access to internal state.

If there’s a feasible way to get it working with stateless functional components the way it works with class-based components, that’d be my ideal scenario. But this gets me moving for now. Thanks for the help!