We just released WebSharper.UI.Next version 3.4.19 to NuGet. This minor release includes a functionality that is widely used with Html.Client and is now also available in UI.Next: OnAfterRender.
This handler allows you to register a callback to be called right after an element has been inserted into the DOM. This is very useful to run functionality from libraries that require an element to be rendered. For example, Google Maps require the container element to have its dimensions already computed. It is easy to create a map using the afterRender handler:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
open WebSharper.UI.Next open WebSharper.UI.Next.Html open WebSharper.UI.Next.Client open WebSharper.Google.Maps let MyMap () = divAttr [ attr.style "width: 500px; height: 500px;" on.afterRender (fun div -> let options = MapOptions( Center = LatLng(47.4968222, 19.0548256), Zoom = 12) let m = Map(div, options) () ) ] [text "Loading Google Maps..."]
Like all event handlers, afterRender is available both as an attribute
on.afterRender and as a method
This is one more step accomplished towards our ultimate goal to completely replace Html.Client with UI.Next. Happy coding!