{"id":18993437,"url":"https://github.com/mdibyo/with-hooks-support","last_synced_at":"2025-04-22T12:40:53.078Z","repository":{"id":48283173,"uuid":"162740635","full_name":"mDibyo/with-hooks-support","owner":"mDibyo","description":"Higher-order component for unlocking React Hooks inside class components","archived":false,"fork":false,"pushed_at":"2021-08-03T13:16:30.000Z","size":417,"stargazers_count":4,"open_issues_count":15,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-17T01:35:35.084Z","etag":null,"topics":["higher-order-component","hooks","hooks-api-react","react","react-components","reacthooks","reactjs"],"latest_commit_sha":null,"homepage":"","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/mDibyo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-21T17:24:24.000Z","updated_at":"2019-03-11T17:05:30.000Z","dependencies_parsed_at":"2022-08-29T18:51:28.385Z","dependency_job_id":null,"html_url":"https://github.com/mDibyo/with-hooks-support","commit_stats":null,"previous_names":["mdibyo/with-hook"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mDibyo%2Fwith-hooks-support","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mDibyo%2Fwith-hooks-support/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mDibyo%2Fwith-hooks-support/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mDibyo%2Fwith-hooks-support/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mDibyo","download_url":"https://codeload.github.com/mDibyo/with-hooks-support/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250242840,"owners_count":21398207,"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":["higher-order-component","hooks","hooks-api-react","react","react-components","reacthooks","reactjs"],"created_at":"2024-11-08T17:21:24.798Z","updated_at":"2025-04-22T12:40:53.053Z","avatar_url":"https://github.com/mDibyo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# withHooksSupport\n\n[![dependencies](https://img.shields.io/david/mDibyo/with-hooks-support.svg)](https://david-dm.org/mDibyo/with-hooks-support)\n[![min](https://img.shields.io/bundlephobia/min/with-hooks-support.svg)](https://www.npmjs.com/package/with-hooks-support)\n[![minzip](https://img.shields.io/bundlephobia/minzip/with-hooks-support.svg)](https://www.npmjs.com/package/with-hooks-support)\n[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)\n[![Greenkeeper badge](https://badges.greenkeeper.io/mDibyo/with-hooks-support.svg)](https://greenkeeper.io/)\n\nHigher-order component for adding hooks support to class components. Check out the\n[Code Sandbox Demo](https://codesandbox.io/s/rj85ql72nq).\n\n```jsx\nclass FancyInput extends React.Component {\n  render() {\n    // `useFormInput` returns an object with `value` and `onChange` attributes.\n    const inputProps = useFormInput();\n\n    return \u003cinput {...inputProps} /\u003e;\n  }\n}\n\nexport default withHooksSupport(FancyInput);\n```\n\n## Usage\n\n```bash\nnpm install with-hooks-support\n```\n\nThen import\n```js\nimport withHooksSupport from 'with-hooks-support';\n```\n\nNOTE: The React Hooks feature is currently only available in certain alpha versions of React.\n```bash\nnpm install react@^16.7.0-alpha.1\n```\n\n## Introduction\n\n[React hooks](https://reactjs.org/docs/hooks-intro.html) (introduced in `react@16.7.0-alpha.1`) lets you use\nstate and other React features without writing a class ie. in functional components. The result is cleaner,\nmore readable code where the code for a single feature is colocated instead of being spread over several\nlife-cycle methods.\n\nNow that you have rewritten all your features as custom hooks, how do you use them in your legacy class components?\nUsing the `withHooksSupport` higher order component, that's how!\n\nWrap your classes with `withHooksSupport`, and use hooks in the render method without any issues.\n\n```jsx\nclass ClassComponent extends React.PureComponent {\n  render() {\n    const [width, setWidth] = useState(window.innerWidth);\n    const handleWindowResize = () =\u003e setWidth(window.innerWidth);\n    useEffect(() =\u003e {\n      window.addEventListener('resize', handleWindowResize);\n      return () =\u003e window.removeEventListener('resize', handleWindowResize);\n    });\n\n    return \u003cdiv\u003eThe window width is {width}\u003c/div\u003e;\n  }\n}\n\nexport default withHooksSupport(ClassComponent);\n```\nAwesome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdibyo%2Fwith-hooks-support","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdibyo%2Fwith-hooks-support","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdibyo%2Fwith-hooks-support/lists"}