React.Flux.DOM

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_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler a -> ReactElementM eventHandler a
p_ :: ReactElementM eventHandler a -> ReactElementM eventHandler 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>

Documentation

class Term eventHandler arg result | result -> arg, result -> eventHandler where

This class allows the DOM combinators to optionally take a list of properties or handlers, or for the list to be omitted.

Methods

term :: String -> arg -> result

Instances

(~) * child (ReactElementM eventHandler a) => Term eventHandler [PropertyOrHandler eventHandler] (child -> ReactElementM eventHandler a)

Term eventHandler (ReactElementM eventHandler a) (ReactElementM eventHandler a)

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