Elmish.React

data ReactElement :: Type

Instantiated subtree of React DOM. JSX syntax produces values of this type.

Instances

• ReactChildren (Array ReactElement)
• ReactChildren ReactElement
• CanPassToJavaScript ReactElement

data ReactComponent :: Type -> Type

This type represents constructor of a React component with a particular behavior. The type prameter is the record of props (in React lingo) that this component expects. Such constructors can be "rendered" into ReactElement via createElement.

data ReactComponentInstance :: Type

A specific instance of a React component - i.e. an object that has state and props properties on it.

class ValidReactProps a 

Asserts that the given type is a valid React props structure. Currently there are three rules for what is considered "valid":

1. The type must be a record.
2. The types of all props must be safe to pass to JavaScript, which is asserted via the CanPassToJavaScript class.
3. There cannot be a prop named 'ref'. Currently we do not support React refs, and when we do, the type of that prop will have to be restricted to something special and effectful.

Instances

• (RowToList r rl, ValidReactPropsRL rl, CanPassToJavaScript (Record r)) => ValidReactProps (Record r)

class ValidReactPropsRL (a :: RowList) 

Internal implementation detail of the ValidReactProps class. This has to be a separate class due to how rows work at type level.

Instances

• ValidReactPropsRL Nil
• ValidReactPropsRL (Cons n t r)

class ReactChildren a  where

Describes a type that can be used as "content" (aka "children") of a React JSX element. The three instances below make it possible to use String and ReactElement as children directly, without wrapping them in an array.

Members

• asReactChildren :: a -> Array ReactElement

Instances

• ReactChildren (Array ReactElement)
• ReactChildren String
• ReactChildren ReactElement

createElement :: forall content props. ValidReactProps props => ReactChildren content => ReactComponent props -> props -> content -> ReactElement

The PureScript import of the React’s createElement function. Takes a component constructor, a record of props, some children, and returns a React DOM element.

To represent HTML data- attributes, createElement supports the _data :: Object prop.

Example

import Elmish.HTML as H
import Foreign.Object as FO

H.div
  { _data: FO.fromHomogenous { toggle: "buttons } }
  [...]

represents the <div data-toggle="buttons"> DOM element.

createElement' :: forall props. ValidReactProps props => ReactComponent props -> props -> ReactElement

Variant of createElement for creating an element without children.

getState :: forall state. ReactComponentInstance -> Effect (Nullable state)

hydrate :: ReactElement -> Element -> Effect Unit

setState :: forall state. ReactComponentInstance -> state -> (Effect Unit) -> Effect Unit

render :: ReactElement -> Element -> Effect Unit

renderToString :: ReactElement -> String