vRRoom - Turbo-charged ReasonReact!

A collection of mostly experimental tools and utilities for effective ReasonReact development.

Installation

Run npm install --save glennsl/vrroom and add vrroom to bs-dependencies in bsconfig.json.

Usage

If you're not too afraid of polluting your namespace, the most convenient way to use Vrroom is to open Vrroom at the top of the module. Otherwise, to avoid polluting the namespace, using module V = Vrroom is recommended.

Examples

Control.Map

/* Without Control.Map */
{
  switch noItems {
  | [||] => <Item label="." />
  | items => 
    items |> Array.map(name => <Item label=name />)
          |> ReasonReact.array
  }  
}

/* With Control.Map */
<Control.Map items=noItems empty=<Item label="-"/> >
  ...(name => <Item label=name />)
</Control.Map>

2310: syntax error, consider adding a `;' before

Control.IfSome

/* Without Control.IfSome */
{
  switch maybeError {
  | Some(error) => error |> text
  | None        => nothing
  }
}

/* With Control.IfSome */
<Control.IfSome option=maybeError>
  ...(error => error |> text)
</Control.IfSome>

2310: syntax error, consider adding a `;' before

pure

/* Without pure */
module ItemBefore = {
  let instance = ReasonReact.statelessComponent("Item");
  let make = (~label, _children) => {
    ...instance,
    render: _self =>
      <li> (label |> text) </li>
  }
};

/* With pure */
module Item = {
  let make = pure((render, ~label) => render(
    <li> (label |> text) </li>
  ));
};

module ItemBefore =
  struct
    let instance = ReasonReact.statelessComponent "Item"
    let make ~label  _children =
      {
        instance with
        render = (fun _self  -> ((li ~children:[label |> text] ())[@JSX ]))
      }
  end
module Item =
  struct
    let make =
      pure
        (fun render  ->
           fun ~label  -> render ((li ~children:[label |> text] ())[@JSX ]))
  end

See more examples in the examples folder

Documentation

type childless = array(nothing)

Used to indicate and enforce a childless component by making it impossible to add children without circumventing the type system, since nothing is an abstract type with no way to construct a value.

Example:

let make = (_:childless) => ...

937: <UNKNOWN SYNTAX ERROR>

let text : string => ReasonReact.reactElement

Alias for Text.string and therefore ReasonReact.string.

Example:

<div> {"Hello!" |> text} </div>

let _ = ((div ~children:["Hello!" |> text] ())[@JSX ])

let nothing : ReasonReact.reactElement

Alias for ReasonReact.null.

Example:

<div> {isAwkward ? nothing : text("Hello!")} </div>

let _ =
  ((div
      ~children:[(match isAwkward with
                  | true  -> nothing
                  | false  -> text "Hello!")] ())[@JSX ])

let nbsp : ReasonReact.reactElement

Insert a   (actually the unicode equivalent since React escapes HTML entities). Useful to avoid some elements mysteriously disappearing when empty (or more likely containing nothing).

Example:

<div> {isAwkward ? nbsp : text("Hello!")} </div>

let _ =
  ((div
      ~children:[(match isAwkward with
                  | true  -> nbsp
                  | false  -> text "Hello!")] ())[@JSX ])

let pure : (((ReasonReact.reactElement, childless) => ReasonReact.component(ReasonReact.stateless ReasonReact.noRetainedProps, ReasonReact.actionless)) => 'a) => 'a

An experimental convenience function for creating a "functional" stateless component.

Example:

modul Item = {
  let make = pure((render, ~label) => render(
    <li> (label |> text) </li>
  ));
};

2310: syntax error, consider adding a `;' before

module Text

let Text.string : string => ReasonReact.reactElement

Alias for ReasonReact.string.

Example:

<div> {"Hello!" |> Text.string} </div>

let _ = ((div ~children:["Hello!" |> Text.string] ())[@JSX ])

let Text.int : int => ReasonReact.reactElement

Would be an alias for ReasonReact.intToElement if it had existed.

Example:

<div> {42 |> Text.int} </div>

let _ = ((div ~children:[42 |> Text.int] ())[@JSX ])

let Text.float : float => ReasonReact.reactElement

Would be an alias for ReasonReact.floatToElement if it had existed.

Example:

<div> {4.2 |> Text.float} </div>

let _ = ((div ~children:[4.2 |> Text.float] ())[@JSX ])

let Text.any : _ => ReasonReact.reactElement

Converts anything to a string, then casts it as an element.

Example:

<div> {["Hello", "brother!"] |> Text.any} </div>

let _ = ((div ~children:[["Hello"; "brother!"] |> Text.any] ())[@JSX ])

module ClassName

let ClassName.join : list(string) => string

Joins a list of strings into a single space-separated string, ignoring empty string.

Example:

<div className=ClassName.join(["button", "primary"])> ... </div>

1244: <UNKNOWN SYNTAX ERROR>

let ClassName.if_ : (bool, string) => string

Returns the given string if condition is true, otherwise an empty string. Most useful in conjunction with thje join function.

Example:

<div className=ClassName.(join(["button", "s-hover" |> if_(isHovered)]))> ... </div>

1244: <UNKNOWN SYNTAX ERROR>

let ClassName.fromOption : option(string) => string

Returns the contained string if any, otherwise an empty string. Most useful in conjunction with thje join function.

Example:

<div className=ClassName.(join(["button", maybeError |> fromOption]))> ... </div>

1244: <UNKNOWN SYNTAX ERROR>

<Fragment> array(ReasonReact.reactElement) </Fragment>

Binding to the standard React Fragment component. Renders its children without a surrounding DOM element.

Example:

<tr> ... </tr>
<Fragment>
  <tr> ... </tr>
  <tr> ... </tr>
</Fragment>
<tr> ... </tr>

1244: <UNKNOWN SYNTAX ERROR>

<Control.Map items=array('a) ?empty=ReasonReact.reactElement> ...('a => ReasonReact.reactElement) </Control.Map>

Renders each item in items using the given render function, or if the array is empty, the given empty element or nothing if oomitted.

Example:

<Control.Map items=[|"apple", "banana"|] empty=<Item label="-"/> >
  ...(name => <Item label=name />)
</Control.Map>

let _ =
  ((Control.Map.createElement ~items:[|"apple";"banana"|]
      ~empty:((Item.createElement ~label:"-" ~children:[] ())[@JSX ])
      ~children:(fun name  ->
                   ((Item.createElement ~label:name ~children:[] ())[@JSX ]))
      ())[@JSX ])

<Control.MapList items=list('a) ?empty=ReasonReact.reactElement> ...('a => ReasonReact.reactElement) </Control.MapList>

Renders each item in items using the given render function, or if the list is empty, the given empty element or nothing if oomitted.

Example:

<Control.MapList items=["apple", "banana"] empty=<Item label="-"/> >
  ...(name => <Item label=name />)
</Control.MapList>

let _ =
  ((Control.MapList.createElement ~items:["apple"; "banana"]
      ~empty:((Item.createElement ~label:"-" ~children:[] ())[@JSX ])
      ~children:(fun name  ->
                   ((Item.createElement ~label:name ~children:[] ())[@JSX ]))
      ())[@JSX ])

<Control.If cond=bool> ...(unit => ReasonReact.reactElement) </Control.If>

Renders the element returned by the render function if cond is true, otherwise nothing.

Example:

<Control.If cond=showHello>
    ...(() => "Hello" |> text)
</Control.If>

let _ =
  ((Control.If.createElement ~cond:showHello
      ~children:(fun ()  -> "Hello" |> text) ())[@JSX ])

<Control.IfSome option=option('a)> ...('a => ReasonReact.reactElement) </Control.IfSome>

Calls the render function with the contained item in option if any, and renders the returned element, otherwise nothing.

Example:

<Control.IfSome option=maybeError>
  ...(error => error |> text)
</Control.IfSome>

let _ =
  ((Control.IfSome.createElement ~option:maybeError
      ~children:(fun error  -> error |> text) ())[@JSX ])