Can't figure out how to wrap my view with a Higher Order Component about fable-react HOT 4 CLOSED

Yes, we were discussing about adding helpers for HOC but it seems they're not so common in React now so we didn't add it at the end. This one is also challenging for several reasons, as it being a function returning a function as you mention. This is actually a curried function but the problem is Fable tries to uncurry functions so using a signature like unit -> ReactElementType -> ReactElementType won't work. There are workarounds for this, but probably here the simple one is using Emit. I think the following code should work:

open Fable.Core
open Fable.Core.JsInterop
open Fable.React

[<Emit("$0.t($1)")>]
let t (props: 'Props) (text: string): string = jsNative

[<ImportMember("react-i18next"); Emit("$0()($1)")>]
let withTranslation(render: 'Props -> ReactElement): ReactElementType<'Props> = jsNative

// Usage
let private myComponent (props: {|foo: int|}) =
    p [] [str (t props "my translated text")]

let MyComponent = withTranslation myComponent

let render() =
    ReactElementType.create MyComponent {| foo = 5|} []

Another challenge is the props of your component shouldn't include t or i18n (if they do, the F# compiler will ask you to fill out those values when calling the component), so I've added an extra helper that also uses emit to access the t field from your props.

from fable-react.

Thank you! This worked as far as getting the HOC to work as expected. This will definitely help us going forward as we continue to consume more 3rd party components and libraries.

However, I feel like I need to mention for the benefit of future people coming to this issue, that using react-i18next as a HOC did not fix the problem of re-rendering of controls on each event until we used the new FunctionComponent feature (https://fable.io/blog/Announcing-Fable-React-5.html).

Now it all works. Thank you so much for the quick reply!

Once we figure this out I will be creating a pull request to document this.

from fable-react.

After playing around with FunctionComponent we were pleasantly surprised to see that our old Elmish view that used the hook did not re-render after each input when wrapped as a function component. Since this is much simpler than using the HOC, and already had interfaces for the hook API, we decided to use FunctionComponent with the hook instead.

Again I would like to say how much we appreciate your help and guidance through this process.

We will definitely look into Feliz if this is the general direction the community is going in.

from fable-react.

Just to let you know, the attention of the community is shifting towards Feliz and the new ReactComponent attribute instead of FunctionComponent. But I think it's not possible to use it with HOC yet. I've opened an issue for that: Zaid-Ajaj/Feliz#304

from fable-react.