How to write Fable bindings for React component library

Question

Is there any step-by-step guidance available on how to write bindings for a react component library from F#/Fable?

The only example I could find is fable-react-toolbox which makes extensive use of the deprecated KeyValueList attribute.

I am particularly interested in using the BlueprintJS library; I have been able to use ts2fable to generate interface corresponding to the various props defined but have no idea what to do next or where to ask for help!

Any guidance would be greatly appreciated!

Michael

Answer 1

If you already have the props as interfaces you can use the Fable React Helpers to create your component for you.

Let's assume you want to create a wrapper for the Foo component (you already extracted the props to an interface and called it IFooProps) from the react-bar module the code you write would look something like this.

let Foo : ComponentClass<obj> = import "Foo" "react-bar"
let inline foo (props : IFooProps list) elems =
    Fable.Helpers.React.from Foo (keyValueList CaseRules.LowerFirst props) elems

The ComponentClass type can be found in the Fable.Import.React module.

A helpful discussion regarding this topic can be found in this GitHub issue https://github.com/fable-compiler/Fable/issues/1044.