halogen-use-trigger-hooks

A tiny Halogen hooks library which allows ones to controll the component evaluation


License
MIT
Install
psc-package install halogen-use-trigger-hooks

Documentation

PureScript Halogen UseTrigger Hooks

A tiny hooks library allows ones to control the component evaluation.

purs - v0.15.15 CI

How to Use

Install with spago

spago install halogen-use-trigger-hooks

You can imperatively force a re-render:

app :: forall q i o m. MonadEffect m => H.Component q i o m
app = Hooks.component \_ _ -> Hooks.do
  { triggerEval } <- useTrigger

  Hooks.pure do
    HH.div []
      [ HH.button
          [ HE.onClick \_ -> triggerEval ]
          [ HH.text "I'll trigger eval!" ]
      ]

Clicking the button will trigger a component evaluation (and thus re-rendering). You can also run some effectful code on the next tick:

app :: forall q i o m. MonadEffect m => H.Component q i o m
app = Hooks.component \_ _ -> Hooks.do
  { onNextTick } <- useTrigger

  let 
    handleClick = do
      onNextTick \_ -> do
        Console.log "I clicked in the previous tick."

  Hooks.pure do
    HH.div []
      [ HH.button
          [ HE.onClick \_ -> handleClick ]
          [ HH.text "I'll trigger eval on next tick!" ]
      ]

Clicking the button does not trigger an immediate re-render; instead, handleClick will run on the next tick (after a component state change).