{"id":13393206,"url":"https://github.com/renatorib/react-powerplug","last_synced_at":"2025-05-14T05:10:47.828Z","repository":{"id":41398018,"uuid":"103083633","full_name":"renatorib/react-powerplug","owner":"renatorib","description":":electric_plug: Renderless Containers","archived":false,"fork":false,"pushed_at":"2023-01-25T23:06:21.000Z","size":1363,"stargazers_count":2679,"open_issues_count":12,"forks_count":100,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-05-05T00:44:39.990Z","etag":null,"topics":["dumb","dumb-components","javascript","react","react-component","render-props","renderless","renderless-components","state","state-container"],"latest_commit_sha":null,"homepage":"https://renatorib.github.io/react-powerplug","language":"JavaScript","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/renatorib.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":"2017-09-11T03:04:18.000Z","updated_at":"2025-04-26T15:37:40.000Z","dependencies_parsed_at":"2023-02-15T12:10:28.967Z","dependency_job_id":null,"html_url":"https://github.com/renatorib/react-powerplug","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renatorib%2Freact-powerplug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renatorib%2Freact-powerplug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renatorib%2Freact-powerplug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renatorib%2Freact-powerplug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/renatorib","download_url":"https://codeload.github.com/renatorib/react-powerplug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253154977,"owners_count":21862623,"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":["dumb","dumb-components","javascript","react","react-component","render-props","renderless","renderless-components","state","state-container"],"created_at":"2024-07-30T17:00:46.391Z","updated_at":"2025-05-14T05:10:47.588Z","avatar_url":"https://github.com/renatorib.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"/logo.png\" alt=\"React PowerPlug\" /\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-powerplug\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/react-powerplug.svg?style=flat-square\" alt=\"npm\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/renatorib/react-powerplug/stargazers\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/renatorib/react-powerplug.svg?style=flat-square\" alt=\"stars\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?url=https://github.com/renatorib/react-powerplug\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/url/https/github.com/renatorib/react-powerplug.svg?style=flat-square\" alt=\"tweet\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n \n \u003e **React PowerPlug is a set of pluggable renderless components and helpers** that provides different types of state and logic utilities that you can use with your dumb components. It creates state and passes down the logic to the children, so you can handle your data. Read about the [Render Props](https://reactjs.org/docs/render-props.html) pattern.\n\n## Highlights\n\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 (~3kb)\n- :books: Well documented\n- :beers: Bunch of awesome utilities\n\n\u003cdetails\u003e\n  \u003csummary\u003eSee quick examples\u003c/summary\u003e\n\n```jsx\nimport { State, Toggle } from 'react-powerplug'\nimport { Pagination, Tabs, Checkbox } from './MyDumbComponents'\n\n\u003cState initial={{ offset: 0, limit: 10, totalCount: 200 }}\u003e\n  {({ state, setState }) =\u003e (\n    \u003cPagination {...state} onChange={(offset) =\u003e setState({ offset })} /\u003e\n  )}\n\u003c/State\u003e\n\n\u003cToggle initial={true}\u003e\n  {({ on, toggle }) =\u003e (\n    \u003cCheckbox checked={on} onChange={toggle} /\u003e\n  )}\n\u003c/Toggle\u003e\n\n// You can also use a `render` prop instead\n\n\u003cToggle\n  initial={false}\n  render={({ on, toggle }) =\u003e (\n    \u003cCheckbox checked={on} onChange={toggle} /\u003e\n  )}\n/\u003e\n```\n\n\u003c/details\u003e\n\n## Guide \u0026 Documentation\n\nhttp://rena.to/react-powerplug/\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://egghead.io/lessons/react-rapid-prototyping-with-react-powerplug\" target=\"_blank\"\u003e\n    \u003cimg 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\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\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\u003cscript src=\"https://unpkg.com/react-powerplug/dist/react-powerplug.min.js\"\u003e\u003c/script\u003e\n```\n\nexposed as `ReactPowerPlug`\n\n# Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/3277185?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRenato Ribeiro\u003c/b\u003e\u003c/sub\u003e](http://twitter.com/renatorib_)\u003cbr /\u003e[💻](https://github.com/renatorib/react-powerplug/commits?author=renatorib \"Code\") [🎨](#design-renatorib \"Design\") [📖](https://github.com/renatorib/react-powerplug/commits?author=renatorib \"Documentation\") [⚠️](https://github.com/renatorib/react-powerplug/commits?author=renatorib \"Tests\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/5635476?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBogdan Chadkin\u003c/b\u003e\u003c/sub\u003e](https://github.com/TrySound)\u003cbr /\u003e[💻](https://github.com/renatorib/react-powerplug/commits?author=TrySound \"Code\") [📖](https://github.com/renatorib/react-powerplug/commits?author=TrySound \"Documentation\") [⚠️](https://github.com/renatorib/react-powerplug/commits?author=TrySound \"Tests\") [🚇](#infra-TrySound \"Infrastructure (Hosting, Build-Tools, etc)\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/2762082?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTravis Arnold\u003c/b\u003e\u003c/sub\u003e](http://travisrayarnold.com)\u003cbr /\u003e[💻](https://github.com/renatorib/react-powerplug/commits?author=souporserious \"Code\") [📖](https://github.com/renatorib/react-powerplug/commits?author=souporserious \"Documentation\") [🐛](https://github.com/renatorib/react-powerplug/issues?q=author%3Asouporserious \"Bug reports\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/1301959?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMax Graey\u003c/b\u003e\u003c/sub\u003e](https://github.com/MaxGraey)\u003cbr /\u003e[💻](https://github.com/renatorib/react-powerplug/commits?author=MaxGraey \"Code\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/9800850?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMateusz Burzyński\u003c/b\u003e\u003c/sub\u003e](https://github.com/Andarist)\u003cbr /\u003e[🐛](https://github.com/renatorib/react-powerplug/issues?q=author%3AAndarist \"Bug reports\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/1448194?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndy Edwards\u003c/b\u003e\u003c/sub\u003e](http://helloandy.xyz)\u003cbr /\u003e[💻](https://github.com/renatorib/react-powerplug/commits?author=jedwards1211 \"Code\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/1159781?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrea Vanini\u003c/b\u003e\u003c/sub\u003e](http://uidu.org)\u003cbr /\u003e[🐛](https://github.com/renatorib/react-powerplug/issues?q=author%3Aapuntovanini \"Bug reports\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/5077042?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIvan Starkov\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/icelabaratory)\u003cbr /\u003e[🐛](https://github.com/renatorib/react-powerplug/issues?q=author%3Aistarkov \"Bug reports\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/25376?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSean Roberts\u003c/b\u003e\u003c/sub\u003e](http://factore.ca)\u003cbr /\u003e[📖](https://github.com/renatorib/react-powerplug/commits?author=SeanRoberts \"Documentation\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/83964?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBraden Kelley\u003c/b\u003e\u003c/sub\u003e](https://github.com/redbmk)\u003cbr /\u003e[🐛](https://github.com/renatorib/react-powerplug/issues?q=author%3Aredbmk \"Bug reports\") |\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\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","funding_links":[],"categories":["UI Components","JavaScript","⚛️ React","Components"],"sub_categories":["Component","React-specific libs:","Data"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenatorib%2Freact-powerplug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frenatorib%2Freact-powerplug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenatorib%2Freact-powerplug/lists"}