Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beizhedenglong/reason-powerplug
🔌 Renderless Containers For ReasonReact
https://github.com/beizhedenglong/reason-powerplug
react-powerplug reason-react reasonml render-props renderless state-container
Last synced: about 1 month ago
JSON representation
🔌 Renderless Containers For ReasonReact
- Host: GitHub
- URL: https://github.com/beizhedenglong/reason-powerplug
- Owner: beizhedenglong
- License: mit
- Created: 2018-09-28T13:43:09.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-13T16:05:10.000Z (about 3 years ago)
- Last Synced: 2024-05-01T19:22:11.922Z (about 2 months ago)
- Topics: react-powerplug, reason-react, reasonml, render-props, renderless, state-container
- Language: OCaml
- Homepage:
- Size: 66.4 KB
- Stars: 10
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-reasonml - reason-powerplug - Renderless containers for ReasonReact. (Reason / Libraries and Bindings)
- awesome-reasonml - reason-powerplug - Renderless containers for ReasonReact. (Reason / Libraries and Bindings)
README
# Reason PowerPlug
Reason PowerPlug is a set of reuseable `components` and `functors` for ReasonReact.
This project is inspired by [react-powerplug](https://github.com/renatorib/react-powerplug).
```ocaml
module StringList = ReList.Make(String);
...{
({list, sort, reset}) =>
sort(String.compare)}>
{ReasonReact.string("sort")}
reset()}>
{ReasonReact.string("reset")}
{
list
|> List.map(s => - {ReasonReact.string(s)}
)
|> Array.of_list
|> ReasonReact.array
}
}
```
[More Examples](https://github.com/beizhedenglong/reason-powerplug/blob/master/examples/Index.re)
## Installation
`yarn add reason-powerplug` or `npm install reason-powerplug --save`
then add `reason-powerplug` to `bs-dependencies` in `bsconfig.json`.
## Components/Functors
All components and functors base on `Value.Make` Functor.
| Name | Type | Component Props | Render Props |
| ---------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------- |
|
STATE CONTAINERS
| |
| **Toggle** | Component | `{ initial, onChange }` | `{ on, toggle, set, reset }` |
| **Counter** | Component | `{ initial, onChange }` | `{ count, inc, dec, incBy, decBy, set, reset }` |
| **Value** | Functor Value.Make(M:S)
`module type S = {type t;};` | `{ initial, onChange }` | `{ value, set, reset }` |
| **ReMap** | Functor ReMap.Make(M:S)
`module type S = {
type t;let compare: (t, t) => int;type value;};` | `{ initial, onChange }` | `{ values, clear, get, has, remove, add, set, reset }` |
| **ReSet** | Functor ReSet.Make(M:S)
`module type S = {
type t;let compare: (t, t) => int;};` | `{ initial, onChange }` | `{ values, add, clear, remove, has, set, reset }` |
| **ReList** | Functor ReList.Make(M:S)
`module type S = {type t;};` | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set, reset }` |
| FEEDBACK CONTAINERS
| |
| **Hover** | Component | `{ onChange }` | `{ hovered, onMouseEnter, onMouseLeave }` |
| **Active** | Component | `{ onChange }` | `{ active, onMouseDown, onMouseUp }` |
| **Focus** | Component | `{ onChange }` | `{ focused, onFocus, onBlur }` |
| **Touch** | Component | `{ onChange }` | `{ touched, onTouchStart, onTouchEnd }` |
| **FocusManager** | Component | `{ onChange }` | `{ focused, blur, tabIndex, onBlur, onFocus, onMouseDown, onMouseUp }` |
| FORM CONTAINERS
| |
| **Input** | Component | `{ initial, onChange }` | `{value, onChange, set, reset, }` |
| OTHER
| |
| **Interval** | Component | `{ delay }` | `{ stop, start, toggle }` |
### Value
```ocaml
module Number =
Value.Make({
type t = int;
});
...{
({value, set}) =>
set(value => value + 1)}>
{value |> string_of_int |> ReasonReact.string}
}
```
TODO