Ok, recently I’ve tried to port Jordan Marr’s Grouping from Fable to WebSharper.
First of all I understood that we could
Inline the call to the React hook
[<Inline "React.useState($0)">] let UseState (init: 'T) = X<'T * ('T -> unit)>
And Loïc Denuzière, the guru of WebSharper, helped my to define a React Functional Component
let FunctionComponent (f: 'props -> React.Element) (props: 'props) : React.Element = React.CreateElement (As<Func<obj, React.Element>> f, box props)
Ok, well, now the nice thing is putting together the power of WS.UI with the availability of react components through W# React.
That implies that one can interoperate between W# UI and W# React. For example I can set a WS.UI var from a WS react component! And I am able to do a similar thing also the other way around: I mean setting a React state (let’s say created by the new
useState) from WS.UI
The secret for the last thing is trasforming the
setState returned from React in a functional F#
mutable first class citizen function.
Here you can find the magic snippet running online from Try W#.
Finally, notice that we can integrate W# React and W# UI also at DOM level in a single hole template.
div [ on.afterRender ( fun el -> ReactHook.React.FunctionComponent ReactHook.HelloWorld.Example () |> WebSharper.React.React.Mount el ) ]