Module

Elmish.React.Import

This module provides types to support FFI-importing React components into Elmish parlance. A typical import of a React component consists of four parts:

  • A partial row of required props.
  • A partial row of optional props.
  • Actual FFI-import of the component constructor. This import is weakly typed and shouldn't be exported from the module. Consider it internal implementation detail.
  • Strongly-typed, PureScript-friendly function that constructs the component. The body of such function usually consists of just a call to createElement (or createElement' for childless components), its only purpose being the type signature. This function is what should be exported for use by consumers.

Classes and type aliases provided in this module, when applied to the constructor function, make it possible to pass only partial props to it, while still ensuring their correct types and presence of non-optional ones.

Example:

// JSX
// `world` prop is required, `hello` and `highlight` are optional
export const MyComponent = ({ hello, world, highlight }) =>
  <div>
    <span>{hello || "Hello"}, </span>
    <span style={{ color: highlight ? "red" : "" }}>{world}</span>
  </div>


-- PureScript
module MyComponent(Props, OptProps, myComponent) where

import Elmish.React (createElement)
import Elmish.React.Import (ImportedReactComponentConstructor, ImportedReactComponent)

type Props r = ( world :: String | r )
type OptProps r = ( hello :: String, highlight :: Boolean | r )

myComponent :: ImportedReactComponentConstructor Props OptProps
myComponent = createElement myComponent_

foreign import myComponent_ :: ImportedReactComponent


-- PureScript use site
import MyComponent (myComponent)
import Elmish.React.DOM (fragment)

view :: ...
view = H.fragment
  [ myComponent { world: "world" }
  , myComponent { hello: "Goodbye", world: "cruel world!", highlight: true }
  ]

#CommonProps 

type CommonProps = (key :: String)

Row of props that are common to all React components, without having to declare them.

#EmptyProps 

type EmptyProps (r :: Row Type) = r

And empty open row. To be used for components that don't have any optional or any required props.

#ImportedReactComponentConstructor' 

type ImportedReactComponentConstructor' reqProps optProps result = forall props. IsSubsetOf props (reqProps + optProps + CommonProps) => IsSubsetOf (reqProps ()) props => ValidReactProps (Record props) => Record props -> result

Type of a function used to create a React JSX-imported component that is generic in such a way as to allow any subset of optional properties (including an empty subset) to be passed in.

#ImportedReactComponentConstructor 

type ImportedReactComponentConstructor reqProps optProps = ImportedReactComponentConstructor' reqProps optProps ReactElement

Type of a function used to create a React JSX-imported component that doesn't admit children. The function is generic in such a way as to allow any subset of optional properties (including an empty subset) to be passed in.

#ImportedReactComponentConstructorWithContent 

type ImportedReactComponentConstructorWithContent reqProps optProps = forall content. ReactChildren content => ImportedReactComponentConstructor' reqProps optProps (content -> ReactElement)

Type of a function used to create a React JSX-imported component that can include children. The function is generic in such a way as to allow any subset of optional properties (including an empty subset) to be passed in. The children are polymorphic, expressed via the ReactChildren type class.

#ImportedReactComponent 

type ImportedReactComponent = forall r. ReactComponent r

A React component directly imported from JavaScript.

#IsSubsetOf 

class IsSubsetOf (subset :: Row Type) (superset :: Row Type)

Instances

Modules