Reason Powerplug

时间:2021-1-8 作者:admin

Reason PowerPlug is a set of reuseable components and functors for reason react. This project is inspired by react-powerplug.

module StringList = ReList.Make(String);

<StringList initial=["d", "c", "a", "e", "b", "h", "g"]>
      ...{
           ({list, sort, reset}) =>
             <div>
               <button onClick={_ => sort(String.compare)}>
                 {ReasonReact.string("sort")}
               </button>
               <button onClick={_ => reset()}>
                 {ReasonReact.string("reset")}
               </button>
               <ul>
                 {
                   list
                   |> List.map(s => <li key=s> {ReasonReact.string(s)} </li>)
                   |> Array.of_list
                   |> ReasonReact.array
                 }
               </ul>
             </div>
         }
    </StringList>

More Examples

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 = {<br />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 = {<br />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

module Number =
  Value.Make({
    type t = int;
  });

<Number initial=1>
  ...{
       ({value, set}) =>
         <div onClick={_ => set(value => value + 1)}>
           {value |> string_of_int |> ReasonReact.string}
         </div>
     }
</Number>

TODO

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。