React

Contents

• Classes
• Rendering
• React Nodes
• Events
• Native Events
• Synthetic Events
• Local
• Attributes
• Creating Elements
• Class creation
• JS Interop
• JS Interop

Synopsis

• data ReactClass props state insig exsig ctx
• data ClassConfig props state insig exsig ctx = ClassConfig {
  • renderFn :: props -> state -> ReactNode insig
  • initialState :: state
  • name :: JSString
  • transition :: (state, insig) -> (state, Maybe exsig)
  • startupSignals :: [insig]
  • childContext :: Maybe (HashMap Text ctx)
  }
• smartClass :: ClassConfig props state insig exsig JSString
• dumbClass :: ClassConfig props () sig sig JSString
• render :: ReactNode Void -> Element -> IO ()
• debugRender :: Show sig => ReactNode sig -> Element -> IO ()
• data ReactNode sig
• data EventProperties e = EventProperties {
  • bubbles :: !Bool
  • cancelable :: !Bool
  • currentTarget :: !e
  • defaultPrevented :: !Bool
  • eventPhase :: !Int
  • isTrusted :: !Bool
  • evtTarget :: !e
  • eventType :: !JSString
  }
• data Target = Target {
  • value :: !JSString
  • tagName :: !JSString
  }
• data ModifierKeys = ModifierKeys {
  • altKey :: !Bool
  • ctrlKey :: !Bool
  • metaKey :: !Bool
  • shiftKey :: !Bool
  }
• data MouseEvent = MouseEvent {
  • clientX :: !Double
  • clientY :: !Double
  • pageX :: !Double
  • pageY :: !Double
  • screenX :: !Double
  • screenY :: !Double
  }
• data KeyboardEvent = KeyboardEvent {
  • charCode :: !Int
  • key :: !JSString
  • keyCode :: !Int
  • location :: !Int
  • repeat :: !Bool
  • which :: !Int
  }
• data ChangeEvent = ChangeEvent {
  • target :: !Target
  • timeStamp :: !Int
  }
• data FocusEvent = FocusEvent
• data BlurEvent = BlurEvent
• onBlur :: (BlurEvent -> Maybe s) -> AttrOrHandler s
• onFocus :: (FocusEvent -> Maybe s) -> AttrOrHandler s
• onChange :: (ChangeEvent -> Maybe s) -> AttrOrHandler s
• onKeyDown :: (KeyboardEvent -> Maybe s) -> AttrOrHandler s
• onKeyPress :: (KeyboardEvent -> Maybe s) -> AttrOrHandler s
• onKeyUp :: (KeyboardEvent -> Maybe s) -> AttrOrHandler s
• onMouseEnter :: (MouseEvent -> Maybe s) -> AttrOrHandler s
• onMouseLeave :: (MouseEvent -> Maybe s) -> AttrOrHandler s
• onDoubleClick :: (MouseEvent -> Maybe s) -> AttrOrHandler s
• onClick :: (MouseEvent -> Maybe s) -> AttrOrHandler s
• onEnter :: s -> AttrOrHandler s
• class GeneralizeSignal sigloc siggen where
  • generalizeSignal :: sigloc -> siggen
• locally :: GeneralizeSignal sigloc siggen => ReactNode sigloc -> ReactNode siggen
• data AttrOrHandler signal
• newtype NoProps = NoProps ()
• noProps :: NoProps
• mkStaticAttr :: ToJSON a => Text -> a -> AttrOrHandler sig
• key_ :: Text -> AttrOrHandler sig
• class_ :: Text -> AttrOrHandler sig
• href_ :: Text -> AttrOrHandler sig
• id_ :: Text -> AttrOrHandler sig
• src_ :: Text -> AttrOrHandler sig
• value_ :: Text -> AttrOrHandler sig
• placeholder_ :: Text -> AttrOrHandler sig
• for_ :: Text -> AttrOrHandler sig
• type_ :: Text -> AttrOrHandler sig
• checked_ :: Bool -> AttrOrHandler sig
• autofocus_ :: Bool -> AttrOrHandler sig
• width_ :: Double -> AttrOrHandler sig
• height_ :: Double -> AttrOrHandler sig
• cx_ :: Double -> AttrOrHandler sig
• cy_ :: Double -> AttrOrHandler sig
• d_ :: Double -> AttrOrHandler sig
• dx_ :: Double -> AttrOrHandler sig
• dy_ :: Double -> AttrOrHandler sig
• x_ :: Double -> AttrOrHandler sig
• y_ :: Double -> AttrOrHandler sig
• r_ :: Double -> AttrOrHandler sig
• fill_ :: Text -> AttrOrHandler sig
• viewBox_ :: Text -> AttrOrHandler sig
• points_ :: Text -> AttrOrHandler sig
• transform_ :: Text -> AttrOrHandler sig
• classParent :: ClassCtx ctx => ClassConfig props state insig exsig ctx -> ReactNode insig -> props -> ReactNode exsig
• classLeaf :: ClassCtx ctx => ClassConfig props state insig exsig ctx -> props -> ReactNode exsig
• exportClassLeaf :: ClassCtx ctx => ClassConfig props state insig exsig ctx -> ExportedClass
• importLeafClass :: ToJSRef props => ImportedClass props sig -> props -> ReactNode sig
• importParentClass :: ToJSRef props => ImportedClass props sig -> props -> ReactNode sig -> ReactNode sig
• data ExportedNode sig
• type ExportedClass = JSRef ExportedClass_
• type ImportedClass props sig = JSRef (ImportedClass_ props sig)

Classes

Rendering

React Nodes

Events

Native Events

Synthetic Events

Local

data Transition
    = UserTyping JSString
    | Toggle
    ...

globalPage_ :: [AttrOrHandler Transition] -> ReactNode Transition

inputBox_ :: ReactNode JSString
pageHeader_ :: ReactNode Void

instance GeneralizeSignal JSString Transition where
    generalizeSignal = UserTyping

-- (globalPage_)
renderFn = props state -> div_ [ class_ "global-page" ] $ do
    locally pageHeader_
    ...
    locally inputBox_
    ...

Attributes

Creating Elements

Class creation

JS Interop

JS Interop