React.Basic.DOM.Components.GlobalEvents

Package

purescript-react-basic-dom

Repository

purescript-react/purescript-react-basic-dom

These helper components register and unregister event callbacks using React's the lifecycle callbacks. They're useful for declaratively defining global behavior which is associated with a particular component being mounted without having to wire all that lifecycle logic up manually.

For example:

render self =
  R.div
    { className: "dropdown-wrapper"
    , children:
        [ dropdownButton
        , guard showDropdown $
            windowEvent
              { eventType: EventType "click"
              , options: defaultOptions
              , handler: \_ -> send self CloseDropdown
              }
              dropdownMenu
        ]
    }

type EventHandlerOptions = { capture :: Boolean, once :: Boolean, passive :: Boolean }

defaultOptions :: EventHandlerOptions

globalEvent :: EventTarget -> { eventType :: EventType, handler :: Event -> Effect Unit, options :: EventHandlerOptions } -> JSX -> JSX

globalEvents :: EventTarget -> Array { eventType :: EventType, handler :: Event -> Effect Unit, options :: EventHandlerOptions } -> JSX -> JSX

windowEvent :: { eventType :: EventType, handler :: Event -> Effect Unit, options :: EventHandlerOptions } -> JSX -> JSX

windowEvents :: Array { eventType :: EventType, handler :: Event -> Effect Unit, options :: EventHandlerOptions } -> JSX -> JSX