React.Spaces

data Space a props

Constructors

• DomNode String (Array Props) IsDynamic SpaceM a
• ReactClassNode (ReactClass props) props IsDynamic SpaceM a
• ReactElementNode ReactElement a
• ChildrenNode (Array ReactElement) a
• Empty a

newtype SpaceF a

SpaceF functor generating Free monad

Constructors

• SpaceF (Exists (Space a))

Instances

• Newtype (SpaceF a) _
• Functor SpaceF
• Propertable (Free SpaceF Unit)
• Propertable (Free SpaceF Unit -> Free SpaceF Unit)

type SpaceM = Free SpaceF Unit

Free monad which is used to build react's vDOM tree.

cls :: forall props. (ReactClass props) -> props -> SpaceM

Class without children.

Operator alias for React.Spaces.cls (left-associative / precedence 3)

cls' :: forall props. (ReactClass props) -> props -> SpaceM -> SpaceM

Class with children.

Operator alias for React.Spaces.cls' (left-associative / precedence 3)

dCls' :: forall props. (ReactClass props) -> props -> SpaceM -> SpaceM

Class with dynamic children.

Operator alias for React.Spaces.dCls' (left-associative / precedence 3)

rDOMNode :: String -> Array Props -> IsDynamic -> SpaceM -> SpaceM

React vDOM node. You'd rather want to use React.Spaces.DOM or React.Spaces.DOM.Dynamic.

text :: String -> SpaceM

Text node.

empty :: SpaceM

Empty node.

element :: ReactElement -> SpaceM

Single element node.

children :: Array ReactElement -> SpaceM

Add multiple elements at once

Children can be implement using element (as sequence_ <<< map element) but this will be more performant.

elements :: forall f. Functor f => Foldable f => f ReactElement -> SpaceM

Alias for children.

class Propertable a  where

Members

• with :: a -> Props -> a

  Add a property to a vDOM node.

Instances

• Propertable (Free SpaceF Unit)
• Propertable (Free SpaceF Unit -> Free SpaceF Unit)

Operator alias for React.Spaces.with (left-associative / precedence 4)

Combinator which adds React.DOM.Props.Props properties to react vDOM nodes.

 div ! className "container" ! onClick clickHandler $ do text "Hello"

withClass :: forall a. Propertable a => a -> String -> a

Operator alias for React.Spaces.withClass (left-associative / precedence 4)

Combinator which adds className prop.

withId :: forall a. Propertable a => a -> String -> a

Operator alias for React.Spaces.withId (left-associative / precedence 4)

Combinator which adds _id prop.

render :: SpaceM -> Array ReactElement

Render SpaceM momnad as an Array ReactElement.

renderIn :: (Array ReactElement -> ReactElement) -> SpaceM -> ReactElement

Render SpaceM monad inside a wrapper element.

btn :: forall eff. ReactSpec Unit Unit eff
btn = (spec unit render)
 where
   render this =
     pure $ renderIn React.DOM.div' do
       button ! className "btn" ! onClick (handleClick this) $ do
         text "Click me!"

   handleClick thie ev = pure unit