React.Basic

data Component :: Type -> Type

A React component which can be used from JavaScript.

data ComponentInstance :: Type

Represents the mounted component instance, or "this" in vanilla React.

data JSX :: Type

A virtual DOM element.

Instances

• Semigroup JSX
• Monoid JSX

component :: forall state props. { displayName :: String, initialState :: Record state, receiveProps :: { instance_ :: ComponentInstance, isFirstMount :: Boolean, props :: Record props, setState :: SetState state, setStateThen :: SetStateThen state, state :: Record state } -> Effect Unit, render :: { instance_ :: ComponentInstance, props :: Record props, setState :: SetState state, setStateThen :: SetStateThen state, state :: Record state } -> JSX } -> Component (Record props)

Create a React component from a specification of that component.

A specification consists of a state type, an initial value for that state, a function to apply incoming props to the internal state, and a rendering function which takes props, state and a state update function.

The rendering function should return a value of type JSX, which can be constructed using the helper functions provided by the React.Basic.DOM module.

Note: This function relies on React.PureComponent internally

stateless :: forall props. { displayName :: String, render :: Record props -> JSX } -> Component (Record props)

Create a stateless React component.

Removes a little bit of the react function's boilerplate when creating components which don't use state.

element :: forall props. Component (Record props) -> Record props -> JSX

Create a JSX node from a React component, by providing the props.

elementKeyed :: forall props. Component (Record props) -> { key :: String | props } -> JSX

Like element, plus a key for rendering components in a dynamic list. For more information see: https://reactjs.org/docs/reconciliation.html#keys

empty :: JSX

An empty node. This is often useful when you would like to conditionally show something, but you don't want to (or can't) modify the children prop on the parent node.

fragment :: Array JSX -> JSX

Render an Array of children without a wrapping component.

fragmentKeyed :: String -> Array JSX -> JSX

Render an Array of children without a wrapping component.

Provide a key when dynamically rendering multiple fragments along side each other.