| Safe Haskell | None |
|---|---|
| Language | Haskell2010 |
React.Flux.DOM
Description
This module contains combinators for creating DOM React elements.
The design of creating ReactElements is loosly based on
lucid.
Most of the combinators in this module have a type:
p_ :: Term eventHandler arg result => arg -> result
but you should interpret this as p_ having either of the following two types:
p_ :: [PropertyOrHandlereventHandler] ->ReactElementMeventHandler a ->ReactElementMeventHandler a p_ ::ReactElementMeventHandler a ->ReactElementMeventHandler a
In the first, p_ takes a list of properties and handlers plus the child element(s). In the
second, the list of properties and handlers is omitted. The Term class allows GHC to
automatically select the appropriate type.
Be aware that in React, there are some differences between the browser DOM objects/properties and the properties and attributes you pass to React, as well as React only supports certian attributes. Event handlers can be created by the combinators in React.Flux.PropertiesAndEvents.
Elements not covered by this module can be created manually using el. But React
only supports certian elements
and they should all be covered by this module.
ul_ $ do li_ (b_ "Hello")
li_ "World"
li_ $
ul_ (li_ "Nested" <> li_ "List")would build something like
<ul>
<li><b>Hello</b><li>
<li>World</li>
<li><ul>
<li>Nested</li>
<li>List</li>
</ul></li>
</ul>- class Term eventHandler arg result | result -> arg, result -> eventHandler where
- a_ :: Term eventHandler arg result => arg -> result
- abbr_ :: Term eventHandler arg result => arg -> result
- address_ :: Term eventHandler arg result => arg -> result
- area_ :: Term eventHandler arg result => arg -> result
- article_ :: Term eventHandler arg result => arg -> result
- aside_ :: Term eventHandler arg result => arg -> result
- audio_ :: Term eventHandler arg result => arg -> result
- b_ :: Term eventHandler arg result => arg -> result
- base_ :: Term eventHandler arg result => arg -> result
- bdi_ :: Term eventHandler arg result => arg -> result
- bdo_ :: Term eventHandler arg result => arg -> result
- big_ :: Term eventHandler arg result => arg -> result
- blockquote_ :: Term eventHandler arg result => arg -> result
- body_ :: Term eventHandler arg result => arg -> result
- br_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler ()
- button_ :: Term eventHandler arg result => arg -> result
- canvas_ :: Term eventHandler arg result => arg -> result
- caption_ :: Term eventHandler arg result => arg -> result
- cite_ :: Term eventHandler arg result => arg -> result
- code_ :: Term eventHandler arg result => arg -> result
- col_ :: Term eventHandler arg result => arg -> result
- colgroup_ :: Term eventHandler arg result => arg -> result
- data_ :: Term eventHandler arg result => arg -> result
- datalist_ :: Term eventHandler arg result => arg -> result
- dd_ :: Term eventHandler arg result => arg -> result
- del_ :: Term eventHandler arg result => arg -> result
- details_ :: Term eventHandler arg result => arg -> result
- dfn_ :: Term eventHandler arg result => arg -> result
- dialog_ :: Term eventHandler arg result => arg -> result
- div_ :: Term eventHandler arg result => arg -> result
- dl_ :: Term eventHandler arg result => arg -> result
- dt_ :: Term eventHandler arg result => arg -> result
- em_ :: Term eventHandler arg result => arg -> result
- embed_ :: Term eventHandler arg result => arg -> result
- fieldset_ :: Term eventHandler arg result => arg -> result
- figcaption_ :: Term eventHandler arg result => arg -> result
- figure_ :: Term eventHandler arg result => arg -> result
- footer_ :: Term eventHandler arg result => arg -> result
- form_ :: Term eventHandler arg result => arg -> result
- h1_ :: Term eventHandler arg result => arg -> result
- h2_ :: Term eventHandler arg result => arg -> result
- h3_ :: Term eventHandler arg result => arg -> result
- h4_ :: Term eventHandler arg result => arg -> result
- h5_ :: Term eventHandler arg result => arg -> result
- h6_ :: Term eventHandler arg result => arg -> result
- head_ :: Term eventHandler arg result => arg -> result
- header_ :: Term eventHandler arg result => arg -> result
- hr_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler ()
- html_ :: Term eventHandler arg result => arg -> result
- i_ :: Term eventHandler arg result => arg -> result
- iframe_ :: Term eventHandler arg result => arg -> result
- img_ :: Term eventHandler arg result => arg -> result
- input_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler ()
- ins_ :: Term eventHandler arg result => arg -> result
- kbd_ :: Term eventHandler arg result => arg -> result
- keygen_ :: Term eventHandler arg result => arg -> result
- label_ :: Term eventHandler arg result => arg -> result
- legend_ :: Term eventHandler arg result => arg -> result
- li_ :: Term eventHandler arg result => arg -> result
- link_ :: Term eventHandler arg result => arg -> result
- main_ :: Term eventHandler arg result => arg -> result
- map_ :: Term eventHandler arg result => arg -> result
- mark_ :: Term eventHandler arg result => arg -> result
- menu_ :: Term eventHandler arg result => arg -> result
- menuitem_ :: Term eventHandler arg result => arg -> result
- meta_ :: Term eventHandler arg result => arg -> result
- meter_ :: Term eventHandler arg result => arg -> result
- nav_ :: Term eventHandler arg result => arg -> result
- noscript_ :: Term eventHandler arg result => arg -> result
- object_ :: Term eventHandler arg result => arg -> result
- ol_ :: Term eventHandler arg result => arg -> result
- optgroup_ :: Term eventHandler arg result => arg -> result
- option_ :: Term eventHandler arg result => arg -> result
- output_ :: Term eventHandler arg result => arg -> result
- p_ :: Term eventHandler arg result => arg -> result
- param_ :: Term eventHandler arg result => arg -> result
- picture_ :: Term eventHandler arg result => arg -> result
- pre_ :: Term eventHandler arg result => arg -> result
- progress_ :: Term eventHandler arg result => arg -> result
- q_ :: Term eventHandler arg result => arg -> result
- rp_ :: Term eventHandler arg result => arg -> result
- rt_ :: Term eventHandler arg result => arg -> result
- ruby_ :: Term eventHandler arg result => arg -> result
- s_ :: Term eventHandler arg result => arg -> result
- samp_ :: Term eventHandler arg result => arg -> result
- script_ :: Term eventHandler arg result => arg -> result
- section_ :: Term eventHandler arg result => arg -> result
- select_ :: Term eventHandler arg result => arg -> result
- small_ :: Term eventHandler arg result => arg -> result
- source_ :: Term eventHandler arg result => arg -> result
- span_ :: Term eventHandler arg result => arg -> result
- strong_ :: Term eventHandler arg result => arg -> result
- style_ :: Term eventHandler arg result => arg -> result
- sub_ :: Term eventHandler arg result => arg -> result
- summary_ :: Term eventHandler arg result => arg -> result
- sup_ :: Term eventHandler arg result => arg -> result
- table_ :: Term eventHandler arg result => arg -> result
- tbody_ :: Term eventHandler arg result => arg -> result
- td_ :: Term eventHandler arg result => arg -> result
- textarea_ :: Term eventHandler arg result => arg -> result
- tfoot_ :: Term eventHandler arg result => arg -> result
- th_ :: Term eventHandler arg result => arg -> result
- thead_ :: Term eventHandler arg result => arg -> result
- time_ :: Term eventHandler arg result => arg -> result
- title_ :: Term eventHandler arg result => arg -> result
- tr_ :: Term eventHandler arg result => arg -> result
- track_ :: Term eventHandler arg result => arg -> result
- u_ :: Term eventHandler arg result => arg -> result
- ul_ :: Term eventHandler arg result => arg -> result
- var_ :: Term eventHandler arg result => arg -> result
- video_ :: Term eventHandler arg result => arg -> result
- wbr_ :: Term eventHandler arg result => arg -> result
- circle_ :: Term eventHandler arg result => arg -> result
- clipPath_ :: Term eventHandler arg result => arg -> result
- defs_ :: Term eventHandler arg result => arg -> result
- ellipse_ :: Term eventHandler arg result => arg -> result
- g_ :: Term eventHandler arg result => arg -> result
- image_ :: Term eventHandler arg result => arg -> result
- line_ :: Term eventHandler arg result => arg -> result
- linearGradient_ :: Term eventHandler arg result => arg -> result
- mask_ :: Term eventHandler arg result => arg -> result
- path_ :: Term eventHandler arg result => arg -> result
- pattern_ :: Term eventHandler arg result => arg -> result
- polygon_ :: Term eventHandler arg result => arg -> result
- polyline_ :: Term eventHandler arg result => arg -> result
- radialGradient_ :: Term eventHandler arg result => arg -> result
- rect_ :: Term eventHandler arg result => arg -> result
- stop_ :: Term eventHandler arg result => arg -> result
- svg_ :: Term eventHandler arg result => arg -> result
- text_ :: Term eventHandler arg result => arg -> result
- tspan_ :: Term eventHandler arg result => arg -> result
Documentation
class Term eventHandler arg result | result -> arg, result -> eventHandler where Source #
This class allows the DOM combinators to optionally take a list of properties or handlers, or for the list to be omitted.
Minimal complete definition
Instances
| (~) * child (ReactElementM eventHandler a) => Term eventHandler [PropertyOrHandler eventHandler] (child -> ReactElementM eventHandler a) Source # | |
| Term eventHandler (ReactElementM eventHandler a) (ReactElementM eventHandler a) Source # | |
blockquote_ :: Term eventHandler arg result => arg -> result Source #
br_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler () Source #
figcaption_ :: Term eventHandler arg result => arg -> result Source #
hr_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler () Source #
input_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler () Source #
linearGradient_ :: Term eventHandler arg result => arg -> result Source #
radialGradient_ :: Term eventHandler arg result => arg -> result Source #