{"id":13621839,"url":"https://github.com/ricokahler/hocify","last_synced_at":"2025-04-07T12:10:05.803Z","repository":{"id":35147315,"uuid":"212932118","full_name":"ricokahler/hocify","owner":"ricokahler","description":"a simple library that converts hooks to HOCs for compatibility with class-based components.","archived":false,"fork":false,"pushed_at":"2025-03-21T23:10:53.000Z","size":4079,"stargazers_count":42,"open_issues_count":5,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T11:02:22.787Z","etag":null,"topics":["higher-order-component","react","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":"","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/ricokahler.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-05T02:19:06.000Z","updated_at":"2025-03-25T09:00:11.000Z","dependencies_parsed_at":"2023-01-15T14:46:57.741Z","dependency_job_id":"31cb6112-e94b-4f9f-96bf-16d30636977e","html_url":"https://github.com/ricokahler/hocify","commit_stats":{"total_commits":193,"total_committers":7,"mean_commits":"27.571428571428573","dds":0.3575129533678757,"last_synced_commit":"05dfba0eceddeb644f84cff77a4a47c1312f4aab"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ricokahler%2Fhocify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ricokahler%2Fhocify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ricokahler%2Fhocify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ricokahler%2Fhocify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ricokahler","download_url":"https://codeload.github.com/ricokahler/hocify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648977,"owners_count":20972945,"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","react","react-hooks","reactjs"],"created_at":"2024-08-01T21:01:11.075Z","updated_at":"2025-04-07T12:10:05.779Z","avatar_url":"https://github.com/ricokahler.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# HOCify · [![codecov](https://codecov.io/gh/ricokahler/hocify/branch/master/graph/badge.svg)](https://codecov.io/gh/ricokahler/hocify) [![bundlephobia](https://badgen.net/bundlephobia/minzip/hocify)](https://bundlephobia.com/result?p=hocify) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\u003e HOCify (H-oh-see-ify) is a simple library that converts hooks to [HOCs](https://reactjs.org/docs/higher-order-components.html) for compatibility with class-based components.\n\n[Hooks](https://reactjs.org/docs/hooks-intro.html) are great! They're the [React team's answer to many problems in React today](https://youtu.be/dpw9EHDh2bM?t=757). However, using them comes with a prerequisite:\n\n\u003e Hooks can only be called inside the body of a function component.\n\nThis is unfortunate because it prevents us from using newer hook-based modules in our older class-based components.\n\nThis library aims to soften that prerequisite by giving you a reusable tool to convert some hooks into higher-order components.\n\n\u003e **Disclaimer:** The purpose of \"using hooks\" within class components is more for compatibility of newer hook-based modules with older class-based components. If your component is already implemented as a function, then use the hook directly. If you're writing a new component, try writing it as a function component.\n\n## Installation\n\n```\nnpm install --save hocify\n```\n\n## Usage\n\n`hocify` is a function that takes in a custom hook and returns an HOC.\n\n**⚠️️ There are a few things to note ️️️️️️⚠️**\n\n1. The function you feed into `hocify` is a hook and thus **must follow [the rules of hooks](https://reactjs.org/docs/hooks-rules.html)**\n2. The arguments to this hook are the props of the wrapped component. You can write a hook inline to `hocify` that uses these props as an input to other hooks.\n3. The resulting inline hook **must** return an object OR `null`. This object will be spread onto the input component as props.\n\n`ExampleComponent.js`\n\n```js\nimport React from 'react';\nimport hocify from 'hocify';\nimport useMyCustomHook from './useMyCustomHook';\n\n// 1) create a custom hook to feed into HOCify.\n// note: it's nice to have this top-level for the hooks linter to work correctly\n// `props` are the incoming props of the resulting component\nconst useHocify = (props) =\u003e {\n  const result = useMyCustomHook(props.inputValue);\n\n  // 3) the resulting hook _must_ return an object OR `null`.\n  return { data: result };\n};\n\nconst withMyCustomHook = hocify(useHocify);\n\nclass ExampleComponent extends React.Component {\n  render() {\n    const { data } = this.props;\n  }\n}\n\nexport default withMyCustomHook(ExampleComponent);\n```\n\n`ParentComponent.js`\n\n```js\nimport React from 'react';\nimport ExampleComponent from './ExampleComponent';\n\nfunction ParentComponent() {\n  // these props are the arguments to the inline hook in the `hocify` call above\n  //                        👇👇👇\n  return \u003cExampleComponent inputValue=\"test\" anotherProp={5} /\u003e;\n}\n\nexport default ParentComponent;\n```\n\n## Examples\n\n### Using two or more hooks with `hocify`\n\nThe following example shows how you can use two hooks with `hocify`. Note that it's better to create a combined custom hook over creating multiple HOCs.\n\n```js\nimport React from 'react';\nimport hocify from 'hocify';\nimport useHookOne from './useHookOne';\nimport useHookTwo from './useHookTwo';\n\nconst useHocify = () =\u003e {\n  const one = useHookOne();\n  const two = useHookTwo();\n\n  return { one, two };\n};\n\n// only create one HOC\nconst withHooks = hocify(useHocify);\n\nclass ClassComponent extends React.Component {\n  // ...\n}\n\nexport default withHooks(ClassComponent);\n```\n\n### Reacting to prop changes\n\nThe following example shows how you can use `props` in `hocify(props =\u003e` to react to prop changes. There is a `useEffect` in our example hook that will re-run if the `id` changes.\n\n`useFetchMovie.js`\n\n```js\nfunction useFetchMovie(id) {\n  const [movie, setMovie] = useState(null);\n\n  useEffect(() =\u003e {\n    async function getData() {\n      const response = await fetch(`/api/movies/${id}`);\n      const movie = await response.json();\n      setMovie(movie);\n    }\n\n    getData();\n  }, [id]);\n\n  return movie;\n}\n```\n\n`MyComponent.js`\n\n```js\nimport React, { useState } from 'react';\nimport useFetchMovie from './useFetchMovie';\n\nconst useHocify = (props) =\u003e {\n  const movie = useFetchMovie(props.id);\n  return { movie };\n};\n\nconst withFetchMovie = hocify(useHocify);\n\nclass MyComponent extends React.Component {\n  render() {\n    const { movie } = this.props;\n\n    // ...\n  }\n}\n\nexport default withFetchMovie(MyComponent);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fricokahler%2Fhocify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fricokahler%2Fhocify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fricokahler%2Fhocify/lists"}