{"id":15655494,"url":"https://github.com/dmtrkovalenko/hook2hoc","last_synced_at":"2025-05-05T14:41:55.835Z","repository":{"id":36850022,"uuid":"170690743","full_name":"dmtrKovalenko/hook2hoc","owner":"dmtrKovalenko","description":"Typesafe converter of React hooks to React hocs 🤓","archived":false,"fork":false,"pushed_at":"2023-01-04T03:20:23.000Z","size":625,"stargazers_count":25,"open_issues_count":14,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-05T07:35:18.299Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/dmtrKovalenko.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":"2019-02-14T12:52:37.000Z","updated_at":"2024-09-03T21:17:10.000Z","dependencies_parsed_at":"2023-01-17T05:45:57.782Z","dependency_job_id":null,"html_url":"https://github.com/dmtrKovalenko/hook2hoc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Fhook2hoc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Fhook2hoc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Fhook2hoc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Fhook2hoc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmtrKovalenko","download_url":"https://codeload.github.com/dmtrKovalenko/hook2hoc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252516141,"owners_count":21760734,"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":[],"created_at":"2024-10-03T12:59:29.966Z","updated_at":"2025-05-05T14:41:55.808Z","avatar_url":"https://github.com/dmtrKovalenko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hook2hoc\n\u003e Typesafe converter of React hooks to React hocs 🤓\n\n[![npm version](https://img.shields.io/npm/v/hook2hoc.svg)](https://www.npmjs.com/package/hook2hoc)\n[![bundlesize](https://badgen.net/bundlephobia/minzip/hook2hoc)](https://bundlephobia.com/result?p=hook2hoc@1.0.0)\n[![codecov](https://codecov.io/gh/dmtrKovalenko/hook2hoc/branch/master/graph/badge.svg)](https://codecov.io/gh/dmtrKovalenko/hook2hoc)\n[![travis](https://travis-ci.com/dmtrKovalenko/hook2hoc.svg?branch=master)](https://travis-ci.com/dmtrKovalenko/hook2hoc)\n\n## What and why\nMain purpose of this project is making integration of hooks much easier. It allowes primarily use hooks, and generate HOCs from on the flight.\n\nThis is an automate and type-safe converter of **React hooks** to ~~React HOCs~~. Just move your logic to hook, create a HOC for compatability and go. \n\n## Installation\n\n```sh\nnpm install hook2hoc\n```\n\n## Usage \n\nThe main purpose of this project is to easily reuse your custom hooks logic in class components.\n\n```jsx\nimport { hook2hoc } from \"hook2hoc\"\n\nfunction useFormInput(defaultValue) {\n  const [value, setValue] = React.useState(defaultValue);\n  return {\n    value,\n    onChange: e =\u003e setValue(e.target.value)\n  };\n}\n\nclass ClassComponent extends React.Component {\n  ...\n  \n  render() {\n    const { value, onChange } = this.props.formInput;\n    return \u003cinput value={value} onChange={onChange} /\u003e;\n  }\n}\n\nexport default hook2hoc(\"formInput\", useFormInput)(ClassComponent)\n// or with default args\nexport default hook2hoc(\"formInput\", useFormInput, [\"initalValue\"])(ClassComponent)\n```\n\n### Dynamic props\n\nIt is also possible to pass arguments to your hooks directly from the props. Just use function instead of array in last argument.\n\n**!! If you need dynamyc props as arguments place it after component **\n```jsx\nhook2hoc(\"formInput\", useFormInput)(ClassComponent, (props) =\u003e [props.someValueFromOutside])\n```\n\n### Type safety\n\nThis helper was created with static typing in mind. For typescript users it will infer the types properly. \nOne thing is required for dynamic props\n\n```typescript\nimport { hook2hoc, tuple } from \"hook2hoc\"\n\nfunction useFormInput(defaultValue: string, foo?: number) {\n  const [value, setValue] = React.useState(defaultValue);\n  return {\n    value,\n    onChange: (e: React.ChangeEvent\u003cHTMLInputElement\u003e) =\u003e setValue(e.target.value)\n  };\n}\n\ntype Props = {\n  someAnotherProp: string;\n  formInput: ReturnType\u003ctypeof useFormInput\u003e;\n};\n\nclass ClassComponent extends React.Component\u003cProps\u003e {\n  render() {\n    const { value, onChange } = this.props.input;\n    return \u003cinput value={value} onChange={onChange} /\u003e;\n  }\n}\n\n// tuple required for strict parameters type casting\nconst WithHook = hook2hoc(\"formInput\", useFormInput)(\n  ClassComponent, \n  props =\u003e tuple([\"initialValue\"])\n)\n\n\u003cWithHook someAnotherProp=\"required as well\" /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmtrkovalenko%2Fhook2hoc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmtrkovalenko%2Fhook2hoc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmtrkovalenko%2Fhook2hoc/lists"}