Proposing that we add a renderInRoot helper function to make this common pattern easier:
import React.Basic.Util (renderInRoot)
myComponent :: Component {}
myComponent = do
component "MyComponentName" \_ -> React.do
-- ...
main :: Effect Unit
main = renderInRoot $ myComponent {}
A slightly more verbose option is:
import React.Basic.Util (createRootElement)
mkMyComponent :: Component {}
mkMyComponent = do
component "MyComponentName" \_ -> React.do
-- ...
main :: Effect Unit
main = do
root <- createRootElement
myComponent <- mkMyComponent
render (myComponent {}) root
We could support both options, and reuse createRootElement in renderInRoot.
For context, Halogen has some convenient helper functions for launching components, such as awaitBody in Halogen.Aff.Util:
hookComponent = Hooks.component \_ _ -> Hooks.do
-- ...
main :: Effect Unit
main =
HA.runHalogenAff do
body <- HA.awaitBody
void $ runUI hookComponent Nothing body
Proposing that we add a
renderInRoot
helper function to make this common pattern easier:A slightly more verbose option is:
We could support both options, and reuse
createRootElement
inrenderInRoot
.For context, Halogen has some convenient helper functions for launching components, such as
awaitBody
in Halogen.Aff.Util: