React.Flux.Internal

Internal module for React.Flux

Normally you should not need to use anything in this module. This module is only needed if you have complicated interaction with third-party javascript rendering code.

Documentation

newtype ReactViewRef props

This type is for the return value of React.createClass

Constructors

ReactViewRef

Fields

reactViewRef :: JSRef ()

class ReactViewKey key where

Keys in React can either be strings or integers

Methods

toKeyRef :: key -> IO (JSRef ())

Instances

ReactViewKey Int

ReactViewKey String

newtype ReactElementRef

This type is for the return value of React.createElement

Constructors

ReactElementRef

Fields

reactElementRef :: JSRef ()

newtype HandlerArg

The first parameter of an event handler registered with React.

Constructors

HandlerArg (JSRef ())

Instances

Show HandlerArg

data PropertyOrHandler handler

Either a property or an event handler.

The combination of all properties and event handlers are used to create the javascript object passed as the second argument to React.createElement.

Constructors

Property Pair

EventHandler

Fields

evtHandlerName :: String

evtHandler :: HandlerArg -> handler

CallbackProperty

Fields

callbackName :: String

callbackFn :: Value -> handler

Instances

Functor PropertyOrHandler

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

data ReactElement eventHandler

A React element is a node or list of nodes in a virtual tree. Elements are the output of the rendering functions of classes. React takes the output of the rendering function (which is a tree of elements) and then reconciles it with the actual DOM elements in the browser. The ReactElement is a monoid, so dispite its name can represent more than one element. Multiple elements are rendered into the browser DOM as siblings.

Constructors

ForeignElement

Fields

fName :: Either String (ReactViewRef Object)

fProps :: [PropertyOrHandler eventHandler]

fChild :: ReactElement eventHandler

forall props key . (Typeable props, ReactViewKey key) => ViewElement

Fields

ceClass :: ReactViewRef props

ceKey :: Maybe key

ceProps :: props

ceChild :: ReactElement eventHandler

ChildrenPassedToView

Content String

Append (ReactElement eventHandler) (ReactElement eventHandler)

EmptyElement

Instances

Functor ReactElement

Monoid (ReactElement eventHandler)

newtype ReactElementM eventHandler a

A writer monad for ReactElements which is used in the rendering function of all views.

do notation or the Monoid instance is used to sequence sibling elements. Child elements are specified via function application; the combinator creating an element takes the child element as a parameter. The OverloadedStrings extension is used to create plain text.

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>

The React.Flux.DOM module contains a large number of combinators for creating HTML elements.

Constructors

ReactElementM

Fields

runReactElementM :: Writer (ReactElement eventHandler) a

Instances

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

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

Monad (ReactElementM eventHandler)

Functor (ReactElementM eventHandler)

Applicative (ReactElementM eventHandler)

Foldable (ReactElementM eventHandler)

(~) * a () => IsString (ReactElementM eventHandler a)

(~) * a () => Monoid (ReactElementM eventHandler a)

elemText :: String -> ReactElementM eventHandler ()

Create a text element from a string. This is an alias for fromString. The text content is escaped to be HTML safe. If you need to insert HTML, instead use the dangerouslySetInnerHTML property.

elemShow :: Show a => a -> ReactElementM eventHandler ()

Create an element containing text which is the result of showing the argument. Note that the resulting string is then escaped to be HTML safe.

el

Arguments

:: String

The element name (the first argument to React.createElement).

-> [PropertyOrHandler eventHandler]

The properties to pass to the element (the second argument to React.createElement).

-> ReactElementM eventHandler a

The child elements (the third argument to React.createElement).

-> ReactElementM eventHandler a

Create a React element.

childrenPassedToView :: ReactElementM eventHandler ()

Transclude the children passed into view or viewWithKey into the current rendering. Use this where you would use this.props.children in a javascript React class.

elementToM :: a -> ReactElement eventHandler -> ReactElementM eventHandler a

Create a ReactElementM containing a given ReactElement.

mkReactElement

Arguments

:: (eventHandler -> IO ())

-> IO [ReactElementRef]

this.props.children

-> ReactElementM eventHandler ()

-> IO (ReactElementRef, [Callback (JSRef () -> IO ())])

Execute a ReactElementM to create a javascript React element and a list of callbacks attached to nodes within the element. These callbacks will need to be released with releaseCallback once the class is re-rendered.