#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.
  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.


#ValidReactPropsRL Source

class ValidReactPropsRL (a :: RowList Type) 

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


#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.



#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