{"id":17321667,"url":"https://github.com/beizhedenglong/reason-powerplug","last_synced_at":"2025-04-14T16:02:03.886Z","repository":{"id":49580240,"uuid":"150746691","full_name":"beizhedenglong/reason-powerplug","owner":"beizhedenglong","description":"🔌 Renderless Containers For ReasonReact","archived":false,"fork":false,"pushed_at":"2021-06-13T16:05:10.000Z","size":68,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T04:41:58.018Z","etag":null,"topics":["react-powerplug","reason-react","reasonml","render-props","renderless","state-container"],"latest_commit_sha":null,"homepage":"","language":"OCaml","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beizhedenglong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-28T13:43:09.000Z","updated_at":"2024-11-04T23:46:05.000Z","dependencies_parsed_at":"2022-08-29T14:41:18.566Z","dependency_job_id":null,"html_url":"https://github.com/beizhedenglong/reason-powerplug","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beizhedenglong%2Freason-powerplug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beizhedenglong%2Freason-powerplug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beizhedenglong%2Freason-powerplug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beizhedenglong%2Freason-powerplug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beizhedenglong","download_url":"https://codeload.github.com/beizhedenglong/reason-powerplug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248913991,"owners_count":21182356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-powerplug","reason-react","reasonml","render-props","renderless","state-container"],"created_at":"2024-10-15T13:38:48.890Z","updated_at":"2025-04-14T16:02:03.848Z","avatar_url":"https://github.com/beizhedenglong.png","language":"OCaml","funding_links":[],"categories":["OCaml"],"sub_categories":[],"readme":"# Reason PowerPlug\nReason PowerPlug is a set of reuseable `components` and `functors` for  ReasonReact.\nThis project is inspired by [react-powerplug](https://github.com/renatorib/react-powerplug). \n\n\n```ocaml\nmodule StringList = ReList.Make(String);\n\n  \u003cStringList initial=[\"d\", \"c\", \"a\", \"e\", \"b\", \"h\", \"g\"]\u003e\n    ...{\n          ({list, sort, reset}) =\u003e\n            \u003cdiv\u003e\n              \u003cbutton onClick={_ =\u003e sort(String.compare)}\u003e\n                {ReasonReact.string(\"sort\")}\n              \u003c/button\u003e\n              \u003cbutton onClick={_ =\u003e reset()}\u003e\n                {ReasonReact.string(\"reset\")}\n              \u003c/button\u003e\n              \u003cul\u003e\n                {\n                  list\n                  |\u003e List.map(s =\u003e \u003cli key=s\u003e {ReasonReact.string(s)} \u003c/li\u003e)\n                  |\u003e Array.of_list\n                  |\u003e ReasonReact.array\n                }\n              \u003c/ul\u003e\n            \u003c/div\u003e\n        }\n  \u003c/StringList\u003e\n```\n[More Examples](https://github.com/beizhedenglong/reason-powerplug/blob/master/examples/Index.re)\n\n## Installation\n`yarn add reason-powerplug` or `npm install reason-powerplug --save`\n\nthen add `reason-powerplug` to `bs-dependencies` in `bsconfig.json`.\n\n## Components/Functors\n\nAll components and functors base on `Value.Make` Functor.\n\n| Name                         | Type                                                                                                  | Component Props         | Render Props                                                           |\n| ---------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------- |\n| \u003ch6\u003eSTATE CONTAINERS\u003c/h6\u003e    |                                                                                                       |\n| **Toggle**                   | Component                                                                                             | `{ initial, onChange }` | `{ on, toggle, set, reset }`                                           |\n| **Counter**                  | Component                                                                                             | `{ initial, onChange }` | `{ count, inc, dec, incBy, decBy, set, reset }`                        |\n| **Value**                    | Functor Value.Make(M:S)\u003cbr /\u003e`module type S = {type t;};`                                             | `{ initial, onChange }` | `{ value, set, reset }`                                                |\n| **ReMap**                    | Functor ReMap.Make(M:S)\u003cbr /\u003e`module type S = {\u003cbr /\u003etype t;let compare: (t, t) =\u003e int;type value;};` | `{ initial, onChange }` | `{ values, clear, get, has, remove, add, set, reset }`                 |\n| **ReSet**                    | Functor ReSet.Make(M:S)\u003cbr /\u003e`module type S = {\u003cbr /\u003etype t;let compare: (t, t) =\u003e int;};`            | `{ initial, onChange }` | `{ values, add, clear, remove, has, set, reset }`                      |\n| **ReList**                   | Functor ReList.Make(M:S)\u003cbr /\u003e`module type S = {type t;};`                                            | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set, reset }`                  |\n| \u003ch6\u003eFEEDBACK CONTAINERS\u003c/h6\u003e |                                                                                                       |\n| **Hover**                    | Component                                                                                             | `{ onChange }`          | `{ hovered, onMouseEnter, onMouseLeave }`                              |\n| **Active**                   | Component                                                                                             | `{ onChange }`          | `{ active, onMouseDown, onMouseUp }`                                   |\n| **Focus**                    | Component                                                                                             | `{ onChange }`          | `{ focused, onFocus, onBlur }`                                         |\n| **Touch**                    | Component                                                                                             | `{ onChange }`          | `{ touched, onTouchStart, onTouchEnd }`                                |\n| **FocusManager**             | Component                                                                                             | `{ onChange }`          | `{ focused, blur, tabIndex, onBlur, onFocus, onMouseDown, onMouseUp }` |\n| \u003ch6\u003eFORM CONTAINERS\u003c/h6\u003e     |                                                                                                       |\n| **Input**                    | Component                                                                                             | `{ initial, onChange }` | `{value, onChange, set, reset, }`                                      |\n| \u003ch6\u003eOTHER\u003c/h6\u003e               |                                                                                                       |\n| **Interval**                 | Component                                                                                             | `{ delay }`             | `{ stop, start, toggle }`                                              |\n\n\n\n### Value\n\n```ocaml\nmodule Number =\n  Value.Make({\n    type t = int;\n  });\n\n\u003cNumber initial=1\u003e\n  ...{\n       ({value, set}) =\u003e\n         \u003cdiv onClick={_ =\u003e set(value =\u003e value + 1)}\u003e\n           {value |\u003e string_of_int |\u003e ReasonReact.string}\n         \u003c/div\u003e\n     }\n\u003c/Number\u003e\n\n\n```\n\n\n\nTODO\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeizhedenglong%2Freason-powerplug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeizhedenglong%2Freason-powerplug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeizhedenglong%2Freason-powerplug/lists"}