Use Hook alias in componentFromHook definition; fix context example

Author: Madeline Trotter

examples/context/src/Context.purs

@@ -15,7 +15,7 @@ mkContext = do
   component "Context" \props -> React.do
     pure
       $ element store
-          { children:
+          { content:
             [ element counter {}
             , element counter {}
             , element counter {}
@@ -24,16 +24,16 @@ mkContext = do
 
 mkStore ::
   ReactContext (Int /\ (Effect Unit)) ->
-  Effect (ReactComponent { children :: Array JSX })
+  Effect (ReactComponent { content :: Array JSX })
 mkStore context = do
-  component "Store" \{ children } -> React.do
+  component "Store" \{ content } -> React.do
     counter /\ setCounter <- useState 0
     let
       increment = setCounter (_ + 1)
     pure
       $ provider context
           (counter /\ increment)
-          children
+          content
 
 mkCounter ::
   ReactContext (Int /\ (Effect Unit)) ->

examples/refs/src/Refs.purs

@@ -8,7 +8,7 @@ import Data.Nullable (Nullable, null)
 import Effect (Effect)
 import Math (pow, sqrt)
 import React.Basic.DOM as R
-import React.Basic.Hooks (type (/\), Hook, ReactComponent, Ref, UseEffect, UseRef, UseState, component, element, fragment, coerceHook, readRefMaybe, useEffect, useRef, useState, (/\))
+import React.Basic.Hooks (type (/\), Hook, ReactComponent, Ref, UseEffect, UseRef, UseState, component, fragment, coerceHook, readRefMaybe, useEffect, useRef, useState, (/\))
 import React.Basic.Hooks as React
 import Unsafe.Coerce (unsafeCoerce)
 import Web.DOM (Node)
@@ -27,17 +27,17 @@ mkRefs = do
     mouseDistance3 /\ buttonRef3 <- useNodeDistanceFromMouse
     pure
       $ fragment
-          [ element (R.unsafeCreateDOMComponent "button")
+          [ R.button
               { ref: buttonRef1
               , children: [ R.text $ show mouseDistance1 <> "px" ]
               , style: R.css { width: "100px", position: "absolute", top: "20px", left: "200px" }
               }
-          , element (R.unsafeCreateDOMComponent "button")
+          , R.button
               { ref: buttonRef2
               , children: [ R.text $ show mouseDistance2 <> "px" ]
               , style: R.css { width: "100px", position: "absolute", top: "60px", left: "40px" }
               }
-          , element (R.unsafeCreateDOMComponent "button")
+          , R.button
               { ref: buttonRef3
               , children: [ R.text $ show mouseDistance3 <> "px" ]
               , style: R.css { width: "100px", position: "absolute", top: "120px", left: "90px" }

src/React/Basic/Hooks.purs

@@ -89,7 +89,7 @@ componentFromHook ::
   Lacks "key" props =>
   Lacks "ref" props =>
   String ->
-  ({ render :: r -> JSX | props } -> Render Unit hooks r) ->
+  ({ render :: r -> JSX | props } -> Hook hooks r) ->
   Effect (ReactComponent { render :: r -> JSX | props })
 componentFromHook name propsToHook = do
   component name \props -> map props.render $ propsToHook props