#ReactElement Source

data ReactElement

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


#ReactComponent Source

data ReactComponent t0

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

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

Re-exports from Elmish.React.Ref

#Ref Source

data Ref (el :: Type)

An opaque type representing the type for React ref props


#callbackRef Source

callbackRef :: forall el. Maybe el -> (Maybe el -> Effect Unit) -> Ref el

Takes the current ref value and a callback function (el -> Effect Unit) and returns a Ref. The current ref value is needed so that we can decide whether the callback function should be run (by comparing the current ref and the new one by reference). The callback function should add the el parameter to some state. E.g.:

data Message = RefChanged (Maybe HTMLInputElement) | …

view :: State -> Dispatch Message -> ReactElement
view state dispatch =
  H.input_ "" { ref: callbackRef state.inputElement (dispatch <<< RefChanged), … }