A Halogen "component" roughly analogous to a stateless React component

App.purs

{-

This example shows how to create the Halogen equivalent of a stateless React component.

Notice that "incrementer" is not a Halogen Component at all; rather, it is merely a function that produces a view using
Halogen's HTML DSL.

-}

module App (Query, app) where

import Prelude
import Data.Maybe (Maybe(Nothing))
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE

-- The main feature of this gist:

incrementer :: forall p i. Int -> (Int -> Maybe i) -> HH.HTML p i
incrementer state callback = HH.button [ HE.onClick (\_ -> callback $ state + 1) ] [ HH.text $ show state ]

-- The host component:

data Query a = SetCount Int a

app :: forall m. H.Component HH.HTML Query Unit Void m
app =
  H.component
    { initialState: const initialState
    , render
    , eval
    , receiver: const Nothing
    }
  where

    initialState :: Int
    initialState = 0

    render :: Int -> H.ComponentHTML Query
    render count = incrementer count $ HE.input SetCount

    eval :: Query ~> H.ComponentDSL Int Query Void m
    eval (SetCount count next) = do
      H.put count
      pure next