JsInterop helper for wrapping a higher order component

[JordanMarr]

I saw a discussion from a few years ago about adding a built-in helper function for wrapping higher order components. Did that ever make its way into the library?

More specifically, this is the one I'm trying to wrap: https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

[alfonsogarciacaro]

The are a couple of issues about it, for example #212. It's a bit tricky to support Higher Order Components out-of-the-box for several reasons:

• Each of the HoC I've seen requires arguments to be passed in a different way so it's difficult to find a solution to fit them all.
• React community is moving to using hooks instead of HoC... or at least hooks were supposed to replace HoC among other things.
• We're also moving to using Feliz and the ReactComponent attribute, so if we do this it makes sense to do it there. There's an issue about it here: https://github.com/Zaid-Ajaj/Feliz/issues/304

Actually the sample linked doesn't look exactly as a HoC (at least to my understanding), just a component that accepts a function renderer as prop/child. I haven't tried it, but something like this should work:

// Bindings
open Fable.React

type AutoSizerProps = {| height: int; width: int |}
type RowProps = {| key: string; index: int; style: obj |}

let inline AutoSizer (render: AutoSizerProps -> ReactElement): ReactElement =
    ofImport "AutoSizer" "react-virtualized" null [unbox render]

let inline AutoSizerList (props: {| height: int
                                    width: int
                                    rowCount: int
                                    rowHeight: int
                                    rowRenderer: RowProps -> ReactElement |}): ReactElement =
    ofImport "List" "react-virtualized" props []

// Your code
open Fable.React
open Fable.React.Props
open Fable.Core.JsInterop

importSideEffects "react-virtualized/styles.css"

let list = [|
    "Brian Vaughn"
    // ...
|]

let rowRenderer (p: RowProps) =
    div [ Key p.key
          // Not sure how the styles are passed so I'm avoiding
          // the Fable.React Style prop which expects a list of CSSProp
          HTMLAttr.Custom("style", p.style) ]
        [ str list.[p.index] ]

ReactDom.render(
    AutoSizer (fun p ->
        AutoSizerList {| height = p.height
                         width = p.width
                         rowCount = list.Length
                         rowHeight = 20
                         rowRenderer = rowRenderer |}
    ),
    Browser.Dom.document.getElementById("example")
)

[JordanMarr]

Wow, thank you for the detailed response, and for the code!! 😃