#ReactElement Source

data ReactElement :: Type

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


#ReactComponent Source

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.

#ReactComponentInstance Source

data ReactComponentInstance :: Type

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

#ValidReactProps Source

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.


#ReactChildren Source

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.



#assignState Source

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 Source

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.


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

  { _data: FO.fromHomogenous { toggle: "buttons" } }

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

#createElement' Source

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

Variant of createElement for creating an element without children.

#getState Source

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

#setState Source

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