module ReactExample where import Prelude import Data.Maybe (Maybe(..)) import Effect (Effect) import Effect.Console as Console import Effect.Exception (throw) import React.Basic.DOM (render) import React.Basic.DOM as R import React.Basic.Events (handler_) import React.Basic.Hooks (Component, component, fragment, useEffect, useEffectAlways, useState, (/\)) import React.Basic.Hooks as React import Web.DOM.NonElementParentNode (getElementById) import Web.HTML (window) import Web.HTML.HTMLDocument (toNonElementParentNode) import Web.HTML.Window (document) mkExample :: Component Unit mkExample = do component "Counter" \_ -> React.do counter /\ setCounter <- useState 0 useEffect counter $ Console.log ("useEffect " <> show counter) *> pure mempty useEffectAlways $ Console.log ("useEffectAlways " <> show counter) *> pure mempty pure $ fragment [ R.button { onClick: handler_ $ setCounter (_ + 1) , children: [ R.text $ "Increment: " <> show counter ] } ] main :: Effect Unit main = do container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window) case container of Nothing -> throw "Container element not found." Just c -> do ex <- mkExample render (ex unit) c