Edit

ReasonReact

This is the main exposted API.

Element creators

let stringToElement = string => reactElement

Use this for creating an element that's just text.

In Reason's JSX, text is not automatically wrapped, you have to do it manually:

<div>
 (ReasonReact.stringToElement("Hello folks"))
</div>

let arrayToElement = array(reactElement) => reactElement

Convert an array of keyed react elements to a react element.

let nullElement = reactElement

Component constructors

let statelessComponent = string => componentSpec( stateless, stateless, noRetainedProps, noRetainedProps, actionless )

Create a stateless component: i.e. a component where state has type stateless.

let reducerComponent = string => componentSpec( 'state, stateless, noRetainedProps, noRetainedProps, 'action )

let statelessComponentWithRetainedProps = string => componentSpec( stateless, stateless, 'retainedProps, noRetainedProps, actionless )

let reducerComponentWithRetainedProps = string => componentSpec( 'state, stateless, 'retainedProps, noRetainedProps, 'action )

JavaScript Interop

let wrapReasonForJs = ( ~component: componentSpec( 'state, 'initialState, 'retainedProps, 'initialRetainedProps, 'action ), jsPropsToReason('a, 'a, 'a, 'a) ) => reactClass

We under constrain the kind of component spec this accepts because we actually extend the originally defined component. It uses mutation on the original component, so that even if it is extended with {...component}, all extensions will also see the underlying js class. I can sleep at night because js interop is integrating with untyped, code and it is possible to create pure-ReasonReact apps without JS interop entirely.

let wrapJsForReason = ( ~reactClass: reactClass, ~props: Js.t(< .. >), 'a ) => component(stateless, noRetainedProps, actionless)

Wrap props into a JS component Use for interop when Reason components use JS components

let createDomElement = ( string, ~props: Js.t(< .. >), array(reactElement) ) => reactElement

type jsPropsToReason( 'jsProps, 'state, 'retainedProps, 'action ) = Js.t('jsProps) => component( 'state, 'retainedProps, 'action )

let refToJsObj = reactRef => Js.t(< .. >)

Unsafe get an untyped javascript object representation of a react ref.

The Router

module Router

This module does not have a toplevel documentation block.

let push = string => unit

update the url with the string path. Example: push("/book/1"), push("/books#title")

type url = { path: list(string), hash: string, search: string }

let watchUrl = url => unit => watcherID

start watching for URL changes. Returns a subscription token. Upon url change, calls the callback and passes it the url record

let unwatchUrl = watcherID => unit

stop watching for URL changes

let dangerouslyGetInitialUrl = unit => url

this is marked as "dangerous" because you technically shouldn't be accessing the URL outside of watchUrl's callback; you'd read a potentially stale url, instead of the fresh one inside watchUrl.

But this helper is sometimes needed, if you'd like to initialize a page whose display/state depends on the URL, instead of reading from it in watchUrl's callback, which you'd probably have put inside didMount (aka too late, the page's already rendered).

So, the correct (and idiomatic) usage of this helper is to only use it in a component that's also subscribed to watchUrl. Please see https://github.com/reasonml-community/reason-react-example/blob/master/src/todomvc/TodoItem.re for an example.

Event handling

module Callback

This module does not have a toplevel documentation block.

type t('payload) = 'payload => unit

Type for callbacks

This type can be left abstract to prevent calling the callback directly. For example, calling update handler event would force an immediate call of handler with the current state, and can be prevented by defining:

type t('payload);

However, we do want to support immediate calling of a handler, as an escape hatch for the existing async setState reactJS pattern

let default = t('payload)

Default no-op callback

let chain = (t('payload), t('payload)) => t('payload)

Chain two callbacks by executing the first before the second one

The types you'll encounter

type self('state, 'retainedProps, 'action) = { handle: 'payload. ('payload -> ('state, 'retainedProps, 'action) self -> unit) -> 'payload Callback.t, reduce: 'payload. ('payload, 'action) reduce, state: 'state, retainedProps: 'retainedProps, send: 'action => unit, onUnmount: unit => unit => unit }

type update('state, 'retainedProps, 'action) = | NoUpdate | Update('state) | SideEffects( self('state, 'retainedProps, 'action) => unit ) | UpdateWithSideEffects( 'state, self('state, 'retainedProps, 'action) => unit )

type reduce( 'payload, 'action ) = 'payload => 'action => Callback.t('payload)

type subscription = | Sub(unit => 'token, 'token => unit): subscription

Subscriptions handle resources that need to be initialized and finalized. Initialization returns a token, and finalization consumes a token.

type oldNewSelf('state, 'retainedProps, 'action) = { oldSelf: self('state, 'retainedProps, 'action), newSelf: self('state, 'retainedProps, 'action) }

type componentSpec( 'state, 'initialState, 'retainedProps, 'initialRetainedProps, 'action ) = { debugName: string, reactClassInternal: reactClassInternal, mut handedOffState: Pervasives.ref(option('state)), willReceiveProps: self( 'state, 'retainedProps, 'action ) => 'state, didMount: self( 'state, 'retainedProps, 'action ) => update('state, 'retainedProps, 'action), didUpdate: oldNewSelf( 'state, 'retainedProps, 'action ) => unit, willUnmount: self( 'state, 'retainedProps, 'action ) => unit, willUpdate: oldNewSelf( 'state, 'retainedProps, 'action ) => unit, shouldUpdate: oldNewSelf( 'state, 'retainedProps, 'action ) => bool, render: self( 'state, 'retainedProps, 'action ) => reactElement, initialState: unit => 'initialState, retainedProps: 'initialRetainedProps, reducer: ('action, 'state) => update( 'state, 'retainedProps, 'action ), subscriptions: self( 'state, 'retainedProps, 'action ) => list(subscription), jsElementWrapped: jsElementWrapped }

other items defined

type reactClass

This API assumes that JSX will desugar the following:

let a = <Foo key="" ref=((_) => ()) attr1=0 attrn=1 />;
let b = ReasonReact.element(
  ~key="", ~ref=((_) => ()),
  Foo.make(~attr1=0, ~attrn=1, [| |])
);

type reactElement

type reactRef

let createElement = ( reactClass, ~?props: option(Js.t(< .. >)), array(reactElement) ) => reactElement

let cloneElement = ( reactElement, ~?props: option(Js.t(< .. >)), array(reactElement) ) => reactElement

type renderNotImplemented = | RenderNotImplemented

type stateless = unit

A stateless component is a component with state of type unit. This cannot be abstract for now, because a stateless component's willReceiveProps needs to return the state, aka unit. We can provide a helper ReasonReact.statelessReturn that's of type stateless, but that's verbose

type noRetainedProps

type actionless = unit

An actionless component is a component with actions of type unit

type reactClassInternal

type jsElementWrapped

For internal use only