Comments (4)
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.
Related Issues (20)
- React Server Components integration HOT 2
- JsInterop helper for wrapping a higher order component HOT 2
- Can't reference React in Fable HOT 2
- Fable.ReactServer.cssProp very slow HOT 4
- Add Custom DU to DOMAttr HOT 1
- FunctionComponent.Lazy and SSR HOT 1
- Update samples to Fable 3
- ReactDOM.hydrate is no longer supported in React 18 HOT 17
- Can't update shared state passed with useContext? HOT 3
- Q: Use ReactElement import member for Storybook HOT 3
- Missing 'open' from Fable.React.Props? HOT 2
- Last Fable.React upgrade breaks my code HOT 7
- Publish source files from Fable.React.Types and Fable.ReactDom.Types to nuget HOT 5
- Fable.React version 8 depends on React.Dom gte 18 lt 19 according to femto
- Add Pointer Events HOT 3
- Why is useCallback not implemented? HOT 3
- How to obtain a component ref in a function component? HOT 5
- FunctionComponent.Of functions cache breaks reusable code HOT 1
- voidEl breaks with: $ELEMENT is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fable-react.