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 :: Type) 

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.

Instances

• (CanPassToJavaScript (Record r)) => ValidReactProps (Record r)
• (Fail (Text "React props must be a record with all fields of JavaScript-compatible types")) => ValidReactProps a

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

assignState :: forall state. ReactComponentInstance -> state -> Effect Unit

The equivalent of this.state = x, as opposed to setState, which is the equivalent of this.setState(x). This function is used in a component's constructor to set the initial state.

createElement :: forall props content. 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