{"bugs":{"url":"https://github.com/renatorib/react-powerplug/issues"},"dist":{"shasum":"7f299a491cb62761c07df6a2327275274e99dbdf","tarball":"https://registry.npmjs.org/react-powerplug/-/react-powerplug-1.0.0-alpha.4.tgz","fileCount":30,"integrity":"sha512-rxfo5a3EkblAlkIXZKM8Z8yxCI7M/8a2zUOlJkFitfXJlSCS4KoXhq0cGJixqSYXB4m2/Oh+r1i8i9s5UuOkSA==","signatures":[{"sig":"MEYCIQC3Vb7FhwvkhwYzqPvmH0sYAu/UK/zBQwsYAPk4Su2jJAIhAKrGk8g3XGSaU/g1RfREonpOanAJadDAHCFmNnu8srnF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":96887},"jest":{"globalSetup":"jest-environment-puppeteer/setup","globalTeardown":"jest-environment-puppeteer/teardown","transformIgnorePatterns":["/node_modules/","/dist/"]},"main":"dist/react-powerplug.cjs.js","name":"react-powerplug","files":["dist","src"],"author":{"url":"http://github.com/renatorib","name":"Renato Ribeiro"},"module":"dist/react-powerplug.esm.js","readme":"<h1 align=\"center\">\n  <img src=\"/logo.png\" alt=\"React PowerPlug\" />\n</h1>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/react-powerplug\" target=\"_blank\">\n    <img src=\"https://img.shields.io/npm/dt/react-powerplug.svg?style=flat-square\" alt=\"npm\" />\n  </a>\n  <a href=\"https://github.com/renatorib/react-powerplug/stargazers\" target=\"_blank\">\n    <img src=\"https://img.shields.io/github/stars/renatorib/react-powerplug.svg?style=flat-square\" alt=\"stars\" />\n  </a>\n  <a href=\"https://twitter.com/intent/tweet?url=https://github.com/renatorib/react-powerplug\" target=\"_blank\">\n    <img src=\"https://img.shields.io/twitter/url/https/github.com/renatorib/react-powerplug.svg?style=flat-square\" alt=\"tweet\" />\n  </a>\n</p>\n\n<br />\n \n > **React PowerPlug is a set of pluggable renderless components and helpers** that provides different types of state and logics so you can use with your dumb components. It creates a state and pass down the logic to the children, so you can handle your data. Read about [Render Props](https://reactjs.org/docs/render-props.html) pattern.\n \n \n## Highlights\n- :ok_hand: Dependency free\n- :electric_plug: Plug and play\n- :crystal_ball: Tree shaking friendly (ESM, no side effects)\n- :package: Super tiny (~4kb)\n- :books: Well documented\n- :beers: Bunch of awesome utilities\n\n<details>\n  <summary>See quick examples</summary>\n\n```jsx\nimport { State, Toggle } from 'react-powerplug'\nimport { Pagination, Tabs, Checkbox } from './MyDumbComponents'\n\n<State initial={{ offset: 0, limit: 10, totalCount: 200 }}>\n  {({ state, setState }) => (\n    <Pagination {...state} onChange={(offset) => setState({ offset })} />\n  )}\n</State>\n\n<Toggle initial={true}>\n  {({ on, toggle }) => (\n    <Checkbox checked={on} onChange={toggle} />\n  )}\n</Toggle>\n\n// You can also use a `render` prop instead\n\n<Toggle\n  initial={false}\n  render={({ on, toggle }) => (\n    <Checkbox checked={on} onChange={toggle} />\n  )}\n/>\n```\n\n</details>\n\n## Components\n\n> **_Note 1:_** This branch is **unstable** and is in **active development**.  \n> To the latest stable version go to [0.1-stable branch](https://github.com/renatorib/react-powerplug/tree/0.1-stable)\n\n> **_Note 2:_** _This is a kind of a cheat sheet for fast search._  \n> _If you want a more detailed **API Reference** and examples for each component see [full docs](/docs)_\n\n| Component                    | Component Props         | Render Props                                   |                                                                             |\n| ---------------------------- | ----------------------- | ---------------------------------------------- | --------------------------------------------------------------------------- |\n| <h6>STATE CONTAINERS</h6>    |\n| **\\<State>**                 | `{ initial, onChange }` | `{ state, setState }`                          | [:point_down:](#state) [:books:](docs/components/State.md)                  |\n| **\\<Toggle>**                | `{ initial, onChange }` | `{ on, toggle, set }`                          | [:point_down:](#toggle) [:books:](docs/components/Toggle.md)                |\n| **\\<Counter>**               | `{ initial, onChange }` | `{count, inc, dec, incBy, decBy, set }`        | [:point_down:](#counter) [:books:](docs/components/Counter.md)              |\n| **\\<Value>**                 | `{ initial, onChange }` | `{ value, setValue, set }`                     | [:point_down:](#value) [:books:](docs/components/Value.md)                  |\n| **\\<Map>**                   | `{ initial, onChange }` | `{ set, get, over, values }`                   | [:point_down:](#map) [:books:](docs/components/Map.md)                      |\n| **\\<Set>**                   | `{ initial, onChange }` | `{ values, add, clear, remove, has }`          | [:point_down:](#set) [:books:](docs/components/Set.md)                      |\n| **\\<List>**                  | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set }` | [:point_down:](#list) [:books:](docs/components/List.md)                    |\n| <h6>FEEDBACK CONTAINERS</h6> |\n| **\\<Hover>**                 | `{ onChange }`          | `{ isHovered, bind }`                          | [:point_down:](#hover) [:books:](docs/components/Hover.md)                  |\n| **\\<Active>**                | `{ onChange }`          | `{ isActive, bind }`                           | [:point_down:](#active) [:books:](docs/components/Active.md)                |\n| **\\<Focus>**                 | `{ onChange }`          | `{ isFocused, bind }`                          | [:point_down:](#focus) [:books:](docs/components/Focus.md)                  |\n| **\\<Touch>**                 | `{ onChange }`          | `{ isTouched, bind }`                          | [:point_down:](#touch) [:books:](docs/components/Touch.md)                  |\n| **\\<FocusManager>**          | `{ onChange }`          | `{ isFocused, blur, bind }`                    | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md)    |\n| <h6>FORM CONTAINERS</h6>     |\n| **\\<Input>**                 | `{ initial, onChange }` | `{ set, value, bind }`                         | [:point_down:](#input) [:books:](docs/components/Input.md)                  |\n| **\\<Form>**                  | `{ initial, onChange }` | `{ input, values }`                            | [:point_down:](#form) [:books:](docs/components/Form.md)                    |\n| <h6>OTHER</h6>               |\n| **\\<Compose>**               | `{ components }`        | _depends on components prop_                   | [:point_down:](#composing-components) [:books:](docs/components/Compose.md) |\n\n## Utilities\n\n| Name                          |                                        |\n| ----------------------------- | -------------------------------------- |\n| compose(...components)        | [:books:](docs/utils/compose.md)       |\n| composeEvents(...objOfEvents) | [:books:](docs/utils/composeEvents.md) |\n\n## Examples\n\n#### State\n\n```jsx\n<State initial={{ isLoading: false, data: null }}>\n  {({ state, setState }) => (\n    <DataReceiver\n      data={state.data}\n      onStart={() => setState({ isLoading: true })}\n      onFinish={data => setState({ data, isLoading: false })}\n    />\n  )}\n</State>\n```\n\n#### Toggle\n\n```jsx\n<Toggle initial={true}>\n  {({ on, toggle }) => <Checkbox checked={on} onChange={toggle} />}\n</Toggle>\n```\n\n#### Counter\n\n```jsx\n<Counter initial={0}>\n  {({ count, inc, dec }) => (\n    <CartItem\n      productName=\"Lorem ipsum\"\n      unitPrice={19.9}\n      count={count}\n      onAdd={inc}\n      onRemove={dec}\n    />\n  )}\n</Counter>\n```\n\n#### Value\n\n```jsx\n<Value initial=\"React\">\n  {({ value, setValue }) => (\n    <Select\n      label=\"Choose one\"\n      options={['React', 'Angular', 'Vue']}\n      value={value}\n      onChange={setValue}\n    />\n  )}\n</Value>\n```\n\n#### Map\n\n```jsx\n<Map initial={{ sounds: true, graphics: 'medium' }}>\n  {({ set, get }) => (\n    <Settings>\n      <ToggleCheck checked={get('sounds')} onChange={c => set('sounds', c)}>\n        Game Sounds\n      </ToggleCheck>\n      <Select\n        label=\"Graphics\"\n        options={['low', 'medium', 'high']}\n        selected={get('graphics')}\n        onSelect={value => set('graphics', value)}\n      />\n    </Settings>\n  )}\n</Map>\n```\n\n#### Set\n\n```jsx\n<Set initial={['react', 'babel']}>\n  {({ values, remove, add }) => (\n    <TagManager>\n      <FormInput onSubmit={add} />\n      {values.map(tag => (\n        <Tag onRemove={() => remove(tag)}>{tag}</Tag>\n      )}\n    </TagManager>\n  )}\n</Set>\n```\n\n#### List\n\n```jsx\n<List initial={['Buy new shoes']}>\n  {({ list, pull, push }) => (\n    <Todo>\n      <TodoFormInput onSubmit={push} />\n      {list.map(todo => (\n        <TodoItem onDelete={() => pull(i => i === todo)}>\n          {todo}\n        </TodoItem>\n      )}\n    </Todo>\n  )}\n</List>\n```\n\n#### Hover\n\n```jsx\n<Hover>\n  {({ isHovered, bind }) => (\n    <div {...bind}>\n      You are {isHovered ? 'hovering' : 'not hovering'} this div.\n    </div>\n  )}\n</Hover>\n```\n\n#### Active\n\n```jsx\n<Active>\n  {({ isActive, bind }) => (\n    <div {...bind}>\n      You are {isActive ? 'clicking' : 'not clicking'} this div.\n    </div>\n  )}\n</Active>\n```\n\n#### Touch\n\n```jsx\n<Touch>\n  {({ isTouched, bind }) => (\n    <div {...bind}>\n      You are {isTouched ? 'touching' : 'not touching'} this div.\n    </div>\n  )}\n</Touch>\n```\n\n#### Focus\n\n```jsx\n<Focus>\n  {({ isFocused, bind }) => (\n    <div>\n      <input {...bind} placeholder=\"Focus me\" />\n      <div>You are {isFocused ? 'focusing' : 'not focusing'} input.</div>\n    </div>\n  )}\n</Focus>\n```\n\n#### Input\n\n```jsx\n<Input initial=\"hello world\">\n  {({ bind, value }) => (\n    <div>\n      <ControlledInput {...bind} />\n      <div>You typed {value}</div>\n    </div>\n  )}\n</Input>\n```\n\n#### Form\n\n```jsx\n<Form initial={{ subject: '', message: '' }}>\n  {({ input, values }) => (\n    <form\n      onSubmit={e => {\n        e.preventDefault()\n        console.log(values)\n      }}\n    >\n      <ControlledInput placeholder=\"Subject\" {...input('subject').bind} />\n      <ControlledTextArea placeholder=\"Message\" {...input('message').bind} />\n      <Submit>Send</Submit>\n\n      {/*\n                                                              input(id) => { bind, set, value }\n                                                            */}\n    </form>\n  )}\n</Form>\n```\n\n# Composing Components\n\nIf you want to avoid 'render props hell' you can compose two or more components in a single one.  \n**[:books: For complete guide, see docs](docs/components/Compose.md)**\n\n```jsx\nimport { Compose } from 'react-powerplug'\n\n<Compose components={[Toggle, Counter]}>\n  {(toggle, counter) => (/* ... */)}\n</Compose>\n```\n\n```jsx\nimport { compose } from 'react-powerplug'\n\nconst ToggleCounter = compose(\n  <Counter initial={5} />,\n  <Toggle initial={false} />\n)\n\n<ToggleCounter>\n  {(toggle, counter) => (\n    <ProductCard {...} />\n  )}\n</ToggleCounter>\n```\n\n---\n\n<p align=\"center\">\n  <a href=\"https://egghead.io/lessons/react-rapid-prototyping-with-react-powerplug\" target=\"_blank\">\n    <img src=\"https://user-images.githubusercontent.com/3277185/37249517-cde30352-24c7-11e8-8f3a-614e2162784d.png\" alt=\"Watch 'Rapid Prototyping with React PowerPlug' by Andrew Del Prete on egghead.io\" />\n  </a>\n</p>\n\n---\n\n# Install\n\n### Node Module\n\n```\nyarn add react-powerplug\n```\n\n```\nnpm i react-powerplug\n```\n\n### UMD\n\n```html\n<script src=\"https://unpkg.com/react-powerplug/dist/react-powerplug.min.js\"></script>\n```\n\nexposed as `ReactPowerPlug`\n\n# Contribute\n\nYou can help improving this project sending PRs and helping with issues.  \nAlso you can ping me at [Twitter](http://twitter.com/renatorib_)\n","gitHead":"20fe31899df543a8d2f92f844a732699448f029d","license":"MIT","scripts":{"lint":"eslint src","test":"npm run build && npm run lint && jest && npm run test:umd && npm run test:cjs","build":"npm run clean && npm run build:code && npm run build:flow","clean":"rimraf dist","test:cjs":"jest --setupTestFrameworkScriptFile ./tests/jestCJSSetup.js","test:umd":"jest --setupTestFrameworkScriptFile ./tests/jestUMDSetup.js","precommit":"lint-staged","test:only":"npm run build:code && jest","build:code":"cross-env NODE_ENV=code rollup -c","build:flow":"echo \"// @flow\n\nexport * from '../src'\" > dist/react-powerplug.cjs.js.flow","prepublishOnly":"npm run clean && npm run build","typecheck:flow":"flow check --max-warnings=0"},"_npmUser":{"name":"renatorib","email":"renatoribroman@gmail.com"},"homepage":"https://github.com/renatorib/react-powerplug","keywords":["react","reactjs","components","dumb","state"],"repository":{"url":"git+https://github.com/renatorib/react-powerplug.git","type":"git"},"_npmVersion":"5.5.1","description":"Give life to your dumb components","directories":{},"lint-staged":{"*.{js,md}":["prettier --write","git add"]},"maintainers":[{"name":"renatorib","email":"ola@rena.to"}],"sideEffects":false,"_nodeVersion":"8.9.1","dependencies":{"@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.1.1","husky":"^0.14.3","react":"^16.2.0","eslint":"^4.6.1","rimraf":"^2.6.1","rollup":"^0.57.1","flow-bin":"^0.66.0","prettier":"^1.10.2","cross-env":"^5.0.5","puppeteer":"^1.0.0","react-dom":"^16.2.0","@babel/cli":"^7.0.0-beta.42","babel-core":"^7.0.0-bridge.0","babel-jest":"^22.1.0","@babel/core":"^7.0.0-beta.42","lint-staged":"^6.0.0","babel-eslint":"^8.2.2","@babel/preset-env":"^7.0.0-beta.42","@babel/preset-react":"^7.0.0-beta.42","eslint-plugin-react":"^7.3.0","react-test-renderer":"^16.2.0","rollup-plugin-babel":"^4.0.0-beta.3","eslint-plugin-import":"^2.7.0","rollup-plugin-uglify":"^3.0.0","@babel/preset-stage-3":"^7.0.0-beta.42","jest-environment-node":"^22.4.3","rollup-plugin-replace":"^2.0.0","jest-environment-puppeteer":"^2.0.0","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-size-snapshot":"^0.3.0","@babel/plugin-transform-runtime":"^7.0.0-beta.42","@babel/plugin-transform-modules-commonjs":"^7.0.0-beta.42"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0-0 || ^16.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/react-powerplug_1.0.0-alpha.4_1523410522230_0.490737806172","host":"s3://npm-registry-packages"},"_id":"react-powerplug@1.0.0-alpha.4","version":"1.0.0-alpha.4"}