https://github.com/glennsl/vrroom
A collection of mostly experimental tools and utilities for effective ReasonReact development.
https://github.com/glennsl/vrroom
Last synced: 10 months ago
JSON representation
A collection of mostly experimental tools and utilities for effective ReasonReact development.
- Host: GitHub
- URL: https://github.com/glennsl/vrroom
- Owner: glennsl
- License: mit
- Created: 2018-01-09T06:13:38.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-31T18:53:49.000Z (over 7 years ago)
- Last Synced: 2025-03-02T01:43:09.058Z (11 months ago)
- Language: OCaml
- Homepage:
- Size: 57.6 KB
- Stars: 27
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```reason
/* Without Control.Map */
{
switch noItems {
| [||] =>
| items =>
items |> Array.map(name => )
|> ReasonReact.array
}
}
/* With Control.Map */
>
...(name => )
```
#### Control.IfSome
```reason
/* Without Control.IfSome */
{
switch maybeError {
| Some(error) => error |> text
| None => nothing
}
}
/* With Control.IfSome */
...(error => error |> text)
```
#### pure
```reason
/* Without pure */
module ItemBefore = {
let instance = ReasonReact.statelessComponent("Item");
let make = (~label, _children) => {
...instance,
render: _self =>
}
};
/* With pure */
module Item = {
let make = pure((render, ~label) => render(
));
};
```
See more examples in [the examples folder](https://github.com/glennsl/vrroom/tree/master/examples)
## 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:
```reason
let make = (_:childless) => ...
```
#### let text : string => ReasonReact.reactElement
Alias for `Text.string` and therefore `ReasonReact.string`.
Example:
```reason
```
#### let nothing : ReasonReact.reactElement
Alias for `ReasonReact.null`.
Example:
```reason
```
#### 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:
```reason
```
#### 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:
```reason
modul Item = {
let make = pure((render, ~label) => render(
));
};
```
### module Text
#### let Text.string : string => ReasonReact.reactElement
Alias for `ReasonReact.string`.
Example:
```reason
```
#### let Text.int : int => ReasonReact.reactElement
Would be an alias for `ReasonReact.intToElement` if it had existed.
Example:
```reason
```
#### let Text.float : float => ReasonReact.reactElement
Would be an alias for `ReasonReact.floatToElement` if it had existed.
Example:
```reason
```
#### let Text.any : _ => ReasonReact.reactElement
Converts anything to a string, then casts it as an element.
Example:
```reason
```
### module ClassName
#### let ClassName.join : list(string) => string
Joins a list of strings into a single space-separated string, ignoring empty string.
Example:
```reason
```
#### 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:
```reason
```
#### 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:
```reason
```
#### <Fragment> array(ReasonReact.reactElement) </Fragment>
Binding to the standard [React Fragment](https://reactjs.org/docs/fragments.html) component. Renders its children without a surrounding DOM element.
Example:
```reason
...
...
...
...
```
#### ...('a => ReasonReact.reactElement)
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:
```reason
>
...(name => )
```
#### ...('a => ReasonReact.reactElement)
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:
```reason
>
...(name => )
```
#### ...(unit => ReasonReact.reactElement)
Renders the element returned by the render function if `cond` is true, otherwise `nothing`.
Example:
```reason
...(() => "Hello" |> text)
```
#### ...('a => ReasonReact.reactElement)
Calls the render function with the contained item in `option` if any, and renders the returned element, otherwise `nothing`.
Example:
```reason
...(error => error |> text)
```