{"id":17816519,"url":"https://github.com/hswolff/with-lifecycles","last_synced_at":"2025-09-24T11:31:26.374Z","repository":{"id":139815902,"uuid":"136682900","full_name":"hswolff/with-lifecycles","owner":"hswolff","description":"An easy way to turn stateless functional components into class components with state and lifecycles. ","archived":false,"fork":false,"pushed_at":"2018-06-09T12:52:29.000Z","size":141,"stargazers_count":21,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-12T04:10:40.430Z","etag":null,"topics":["lifecycles","react","sfc"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hswolff.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-09T02:08:54.000Z","updated_at":"2023-07-27T12:03:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"ee831bc6-68a9-4db9-824c-4fdcf670eb31","html_url":"https://github.com/hswolff/with-lifecycles","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/hswolff%2Fwith-lifecycles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hswolff%2Fwith-lifecycles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hswolff%2Fwith-lifecycles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hswolff%2Fwith-lifecycles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hswolff","download_url":"https://codeload.github.com/hswolff/with-lifecycles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234077736,"owners_count":18775960,"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":["lifecycles","react","sfc"],"created_at":"2024-10-27T16:38:21.016Z","updated_at":"2025-09-24T11:31:21.048Z","avatar_url":"https://github.com/hswolff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# with-lifecycles\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n\nEveryone loves React's [stateless functional components](https://reactjs.org/docs/components-and-props.html#functional-and-class-components) (SFC). The ease and simplicity of writing just a function for a React component is so delicious that you wish you could write your entire app with only functions!\n\nInevitably, you'll run across a need to use state in your component. Or even scarier, having to use some of the lifecycle methods of a React Class Component.\n\nThen you're met with a horrible quandry: do you keep the beautiful simplicity of your SFC (🤗) or do you rewrite it to be a React Class Component (😢).\n\nAnd _everyone_ hates that most horrible of all chores of converting a SFC to a Class component.\n\n**...well fear not...**\n\nFor this is the library for you! It'll let you have your 🎂 and 👄 it too!\n\n## Example\n\nWe have a simple Counter component that can increment a counter.\n\n```js\nconst Counter = ({ count, incrementCount }) =\u003e (\n  \u003cdiv\u003e\n    \u003cdiv\u003eCurrent count: {count}\u003c/div\u003e\n    \u003cbutton onClick={incrementCount}\u003eIncrement\u003c/button\u003e\n  \u003c/div\u003e\n);\n```\n\nThis is a nice and simple SFC. However, it doesn't do anything without any state. So let's add that.\n\n```js\nconst CounterWithLifecycles = withLifecycles({\n  getInitialState: () =\u003e ({ count: 0 }),\n  mapStateToProps: state =\u003e ({ count: state.count }),\n  incrementCount: ({ props, state, setState }) =\u003e\n    setState({ count: state.count + 1 }),\n})(Counter);\n```\n\nVoila! 🎉 Your SFC now has all the super powers of a React Class component.\n\nPlay with a live example on Codesandbox.\n\n[![Edit withLifecycles](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/8nzwmv7x92)\n\n## Documentation\n\n`withLifecycles` is a [Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) which takes in an object which supports every known React Class method, including any additional methods you want to be included in the returned class (such as event handlers), and returns a function which takes in the component you want to wrap.\n\nThere's two additional special properties:\n\n**getInitialState(props)**: This is similar to the old `React.createClass` method and is a way for you to set the initial state of the wrapped component. It is called with `props`.\n\n**mapStateToProps(state, props)**: Similar to [react-redux's](https://github.com/reduxjs/react-redux) `mapStateToProps`, it's called with `state` and `props`.\n\n**non-React method**: Any non-React method is called with an object that looks like:\n\n```js\n{\n    event: event, // Event Handler Event if it exists.\n    state: this.state, // State\n    props: this.props, // Props\n    setState: this.setState, // A copy of setState for updating.\n}\n```\n\n[build-badge]: https://img.shields.io/travis/hswolff/with-lifecycles/master.png?style=flat-square\n[build]: https://travis-ci.org/hswolff/with-lifecycles\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/with-lifecycles\n[coveralls-badge]: https://img.shields.io/coveralls/hswolff/with-lifecycles/master.png?style=flat-square\n[coveralls]: https://coveralls.io/github/hswolff/with-lifecycles\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhswolff%2Fwith-lifecycles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhswolff%2Fwith-lifecycles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhswolff%2Fwith-lifecycles/lists"}