+ "html": "<p><img src=\"./logo.png\"></p>\n<p><a href=\"https://www.npmjs.com/package/react-powerplug\"><img src=\"https://img.shields.io/npm/v/react-powerplug.svg?style=flat-square\"></a>\n<a href=\"https://www.npmjs.com/package/react-powerplug\"><img src=\"https://img.shields.io/npm/dt/react-powerplug.svg?style=flat-square\"></a>\n<a href=\"https://github.com/renatorib/react-powerplug/issues\"><img src=\"https://img.shields.io/github/issues/renatorib/react-powerplug.svg?style=flat-square\"></a>\n<a href=\"https://github.com/renatorib/react-powerplug/stargazers\"><img src=\"https://img.shields.io/github/stars/renatorib/react-powerplug.svg?style=flat-square\"></a>\n<a href=\"https://twitter.com/intent/tweet?url=https://github.com/renatorib/react-powerplug\"><img src=\"https://img.shields.io/twitter/url/https/github.com/renatorib/react-powerplug.svg?style=social&style=flat-square\"></a></p>\n<p>:electric_plug: Give life to your Dumb Components. </p>\n<p><strong>React PowerPlug is a <em>Just add water™</em></strong> set of <strong>function as children components</strong> that add different types of state logics in your dumb components. It creates a state and pass down the logic to the children, so you can handle your data/callbacks in dumb components.</p>\n<p>It's has been created to (but not limited to) use with <strong>storybook, react styleguidist, documentations, etc</strong>. because it's the most common use case. Otherwise you can use in your normal components too, for example a Dropdown that needs to know if opened or not, and others cases. </p>\n<p><a href=\"https://codesandbox.io/s/jp890p2x7w\">Play with live Toggle example on CodeSandbox</a></p>\n<pre><span class=\"hljs-keyword\">import</span> { Toggle } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'react-powerplug'</span>\n<span class=\"hljs-keyword\">import</span> Checkbox <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'./MyDumbCheckbox'</span>\n\n<Toggle initial={<span class=\"hljs-literal\">true</span>}>\n {({ on, toggle }) => (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Checkbox</span> <span class=\"hljs-attr\">checked</span>=<span class=\"hljs-string\">{on}</span> <span class=\"hljs-attr\">onChange</span>=<span class=\"hljs-string\">{toggle}</span> /></span>\n )}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">Toggle</span>></span></span></pre><h1>Components</h1>\n<p><strong><em>Note:</em></strong> <em>This is a kind of a cheat sheet for fast search.</em><br><em>If you want a more detailed <strong>API Reference</strong> and examples for each component see the <a href=\"docs/README.md\">Docs</a></em></p>\n<h2><a href=\"docs/components/State.md\">State</a></h2>\n<p><strong>Props:</strong> <code>{ initial }</code><br><strong>Args:</strong> <code>{ state, setState }</code></p>\n<pre><State initial={{ <span class=\"hljs-attr\">isLoading</span>: <span class=\"hljs-literal\">false</span>, <span class=\"hljs-attr\">data</span>: <span class=\"hljs-literal\">null</span> }}>\n {({ state, setState }) => (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">DataReceiver</span>\n <span class=\"hljs-attr\">data</span>=<span class=\"hljs-string\">{state.data}</span>\n <span class=\"hljs-attr\">onStart</span>=<span class=\"hljs-string\">{()</span> =></span> setState({ isLoading: true })}\n onFinish={data => setState({ data, isLoading: false })}\n />\n )}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">State</span>></span></span></pre><h2><a href=\"docs/components/Toggle.md\">Toggle</a></h2>\n<p><strong>Props:</strong> <code>{ initial }</code><br><strong>Args:</strong> <code>{ on, off, toggle, setOn }</code></p>\n<pre><Toggle initial={<span class=\"hljs-literal\">true</span>}>\n {({ on, toggle }) => (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Checkbox</span> <span class=\"hljs-attr\">checked</span>=<span class=\"hljs-string\">{on}</span> <span class=\"hljs-attr\">onChange</span>=<span class=\"hljs-string\">{toggle}</span> /></span>\n )}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">Toggle</span>></span></span></pre><h2><a href=\"docs/components/Counter.md\">Counter</a></h2>\n<p><strong>Props:</strong> <code>{ initial }</code><br><strong>Args:</strong> <code>{ count, inc, dec }</code></p>\n<pre><Counter initial={<span class=\"hljs-number\">0</span>}>\n {({ count, inc, dec }) => (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">CartItem</span>\n <span class=\"hljs-attr\">productName</span>=<span class=\"hljs-string\">"Lorem ipsum"</span>\n <span class=\"hljs-attr\">unitPrice</span>=<span class=\"hljs-string\">{19.90}</span>\n <span class=\"hljs-attr\">count</span>=<span class=\"hljs-string\">{count}</span>\n <span class=\"hljs-attr\">onAdd</span>=<span class=\"hljs-string\">{inc}</span>\n <span class=\"hljs-attr\">onRemove</span>=<span class=\"hljs-string\">{dec}</span>\n /></span>\n )}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">Counter</span>></span></span></pre><h2><a href=\"docs/components/Set.md\">Set</a></h2>\n<p><strong>Props:</strong> <code>{ initial }</code><br><strong>Args:</strong> <code>{ set, get, values }</code></p>\n<pre><<span class=\"hljs-built_in\">Set</span> initial={{ <span class=\"hljs-attr\">sounds</span>: <span class=\"hljs-literal\">true</span>, <span class=\"hljs-attr\">graphics</span>: <span class=\"hljs-string\">'medium'</span> }}>\n {({ set, get }) => (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Settings</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">ToggleCheck</span> <span class=\"hljs-attr\">checked</span>=<span class=\"hljs-string\">{get(</span>'<span class=\"hljs-attr\">sounds</span>')} <span class=\"hljs-attr\">onChange</span>=<span class=\"hljs-string\">{c</span> =></span> set('sounds', c)}>\n Game Sounds\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">ToggleCheck</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">Select</span>\n <span class=\"hljs-attr\">label</span>=<span class=\"hljs-string\">"Graphics"</span>\n <span class=\"hljs-attr\">options</span>=<span class=\"hljs-string\">{[</span>'<span class=\"hljs-attr\">low</span>', '<span class=\"hljs-attr\">medium</span>', '<span class=\"hljs-attr\">high</span>']}\n <span class=\"hljs-attr\">selected</span>=<span class=\"hljs-string\">{get(</span>'<span class=\"hljs-attr\">graphics</span>')}\n <span class=\"hljs-attr\">onSelect</span>=<span class=\"hljs-string\">{value</span> =></span> set('graphics', value)}\n />\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Settings</span>></span>\n )}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">Set</span>></span></span></pre><h2><a href=\"docs/components/List.md\">List</a></h2>\n<p><strong>Props:</strong> <code>{ initial }</code><br><strong>Args:</strong> <code>{ list, push, pull, sort, setList }</code></p>\n<pre><List initial={[<span class=\"hljs-string\">'react'</span>, <span class=\"hljs-string\">'babel'</span>]}>\n {({ list, pull, push }) => (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">FormInput</span> <span class=\"hljs-attr\">onSubmit</span>=<span class=\"hljs-string\">{push}</span> /></span>\n {list.map(tag => (\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">Tag</span> <span class=\"hljs-attr\">onRemove</span>=<span class=\"hljs-string\">{()</span> =></span> pull(value => value === tag)}>\n {tag}\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Tag</span>></span>\n )}\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n )}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">List</span>></span></span></pre><h2><a href=\"docs/components/Bind.md\">Bind</a></h2>\n<p><strong>Props:</strong> <code>{ initial, getter }</code><br><strong>Args:</strong> <code>{ value, setValue, bind }</code> </p>\n<pre><Bind initial=<span class=\"hljs-string\">"hello world"</span>>\n {({ bind, value }) => (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">ControlledInput</span> {<span class=\"hljs-attr\">...bind</span>} /></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>You typed {value}<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n )}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">Bind</span>></span></span></pre><h2><a href=\"docs/components/Compose.md\">Compose</a></h2>\n<p><strong>Props:</strong> <code>{ states }</code><br><strong>Args:</strong> <em>depends on passed states</em></p>\n<p>For an example, see below.</p>\n<h1>Composing Components</h1>\n<p>If you want to merge two of more components functionalities, you can compose they.<br>For complete guide <a href=\"docs/components/Compose.md\">see Compose docs</a></p>\n<pre><span class=\"hljs-keyword\">import</span> { compose } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'react-powerplug'</span>\n\n<span class=\"hljs-keyword\">const</span> ToggleCounter = compose(<Toggle initial={true} />, <Counter initial={2} />)\n\n<ToggleCounter>\n {({ count, inc, dec, on, toggle }) => (\n <ProductCard\n {...productInfo}\n isFavorited={on}\n onFavorite={toggle}\n count={count}\n onAdd={inc}\n onRemove={dec}\n />\n )}\n</ToggleCounter></pre><p>Also, you can use a built-in Compose component and pass components on <code>states</code> prop</p>\n<pre><span class=\"hljs-keyword\">import</span> { Compose } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'react-powerplug'</span>\n\n<Compose states={[<Toggle initial={true} />, <Counter initial={2} />]}>\n {({ on, toggle, count, inc, dec }) => (\n <ProductCard {...} />\n )}\n</Compose></pre><p>It is the same to do this:</p>\n<pre><Counter initial={<span class=\"hljs-number\">2</span>}>\n {({ count, inc, dec }) => (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Toggle</span> <span class=\"hljs-attr\">initial</span>=<span class=\"hljs-string\">{true}</span>></span>\n {({ on, toggle }) => (\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">ProductCard</span>\n {<span class=\"hljs-attr\">...productInfo</span>}\n <span class=\"hljs-attr\">isFavorited</span>=<span class=\"hljs-string\">{on}</span>\n <span class=\"hljs-attr\">onFavorite</span>=<span class=\"hljs-string\">{toggle}</span>\n <span class=\"hljs-attr\">count</span>=<span class=\"hljs-string\">{count}</span>\n <span class=\"hljs-attr\">onAdd</span>=<span class=\"hljs-string\">{inc}</span>\n <span class=\"hljs-attr\">onRemove</span>=<span class=\"hljs-string\">{dec}</span>\n /></span>\n )}\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Toggle</span>></span>\n )}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">Counter</span>></span></span></pre><p>Because of this, when you use <code>toggle</code> function, only <code><Toggle></code> will be rerendered, but if you use <code>inc</code> or <code>dec</code> functions, both <code><Counter></code> and <code><Toggle></code> will be rerendered. Even using <code>compose()</code> utility.</p>\n<h1>Install</h1>\n<h3>Node Module</h3>\n<pre>yarn <span class=\"hljs-keyword\">add</span><span class=\"bash\"> react-powerplug</span></pre><pre>npm <span class=\"hljs-selector-tag\">i</span> react-powerplug</pre><h3>UMD library</h3>\n<pre><span class=\"hljs-tag\"><<span class=\"hljs-name\">script</span> <span class=\"hljs-attr\">src</span>=<span class=\"hljs-string\">"https://unpkg.com/react-powerplug/dist/react-powerplug.min.js"</span>></span><span class=\"undefined\"></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">script</span>></span></pre><p>exposed as <code>ReactPowerPlug</code></p>\n<h1>Contribute</h1>\n<p>You can help improving this project sending PRs and helping with issues.<br>Also you ping me at <a href=\"http://twitter.com/renatorib_\">Twitter</a></p>\n"
0 commit comments