Elmish.React

data ReactElement

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

Instances

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

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.

data ReactComponentInstance

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.

getField :: forall @a. CanReceiveFromJavaScript a => String -> ReactComponentInstance -> Effect (Maybe a)

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

hydrate :: ReactElement -> Element -> Effect Unit

setField :: forall @a. CanPassToJavaScript a => String -> a -> ReactComponentInstance -> Effect Unit

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

render :: ReactElement -> Element -> Effect Unit

renderToString :: ReactElement -> String

unmount :: Element -> Effect Unit

data Ref (el :: Type)

An opaque type representing the type for React ref props

Instances

• CanPassToJavaScript (Ref a)

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), … }