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

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

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.

/* 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>

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

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

/* 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>
  ));
};

See more examples in the examples folder

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) => ...

Alias for Text.string and therefore ReasonReact.string.

Example:

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

Alias for ReasonReact.null.

Example:

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

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>

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

Example:

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

Alias for ReasonReact.string.

Example:

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

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

Example:

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

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

Example:

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

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

Example:

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

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

Example:

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

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>

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>

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>

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>

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>

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

Example:

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

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>