{"id":29776893,"url":"https://github.com/godaddy/addhoc","last_synced_at":"2025-07-27T10:21:09.209Z","repository":{"id":34149708,"uuid":"170563098","full_name":"godaddy/addhoc","owner":"godaddy","description":"Handy little helper to create proper React HOC functions complete with hoisted statics and forwarded refs","archived":false,"fork":false,"pushed_at":"2023-10-25T20:38:32.000Z","size":1262,"stargazers_count":41,"open_issues_count":0,"forks_count":3,"subscribers_count":24,"default_branch":"main","last_synced_at":"2025-07-18T09:59:23.879Z","etag":null,"topics":["higher-order-component","hoc","react","react-hoc","refs"],"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/godaddy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-13T19:05:46.000Z","updated_at":"2023-10-26T16:57:11.000Z","dependencies_parsed_at":"2023-02-17T11:45:22.684Z","dependency_job_id":"683f6fee-4857-4ece-b6a0-518e5d3112a6","html_url":"https://github.com/godaddy/addhoc","commit_stats":{"total_commits":68,"total_committers":10,"mean_commits":6.8,"dds":0.7058823529411764,"last_synced_commit":"0c9e62b73bbe7085c2b45fef7d7fa97cf97729a2"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/godaddy/addhoc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godaddy%2Faddhoc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godaddy%2Faddhoc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godaddy%2Faddhoc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godaddy%2Faddhoc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/godaddy","download_url":"https://codeload.github.com/godaddy/addhoc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godaddy%2Faddhoc/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266639271,"owners_count":23960760,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","hoc","react","react-hoc","refs"],"created_at":"2025-07-27T10:20:58.132Z","updated_at":"2025-07-27T10:21:09.198Z","avatar_url":"https://github.com/godaddy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# addhoc\n\nHandy little helper to create proper HOC functions complete with hoisted statics and forwarded refs\n\n## Motivation\n\nAs defined in the [React documentation], a Higher Order Component, or HOC, is a function that returns a React component\nthat wraps a specified child component and often provides augmented functionality. Implementing HOCs can be hard,\nespecially when considering hoisting statics, managing `ref` forwarding, and handling display name. `addhoc` aims to\nhandle these challenges for you.\n\n## Benefits\n\n`addhoc` creates HOC functions that automatically:\n\n- [pass through unrelated `props`](https://reactjs.org/docs/higher-order-components.html#convention-pass-unrelated-props-through-to-the-wrapped-component)\n- [wrap the display name for easy debugging](https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging)\n- [hoist non-React statics](https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over)\n- [forward `refs`](https://reactjs.org/docs/higher-order-components.html#refs-arent-passed-through)\n\n## Installation\n\n```bash\nnpm install addhoc\n```\n\n### API\n\n```ts\n/**** Public API ****/\n// This is the main exported entrypoint\naddhoc(renderFn: Function, [name: String = 'WithHOC'], [...extraArgs]): Function\n\n/**** Signatures, not exported API ****/\n// This is the signature of the renderFn parameter to addhoc()\nrenderFn(getWrappedComponent: Function, [...extraArgs]): React.Component\n\n// This is the signature of the getWrappedComponent parameter to renderFn()\ngetWrappedComponent([additionalProps: Object]): React.Component\n```\n\n## Usage\n\n`addhoc` is a function that returns a HOC function. To construct your HOC, you simply pass a callback that acts as the\nrender function of your top-level component. Your callback is provided a function parameter that returns the wrapped\nchild that's initially provided to the HOC. You can call that callback with an object of `props` to add to the wrapped\ncomponent.\n\n### Example 1: Adding a prop\n\n```jsx\nimport addhoc from 'addhoc';\nimport MyComponent from './my-component';\n\nconst withFooProp = addhoc(getWrappedComponent =\u003e getWrappedComponent({ foo: true }), 'WithFooProp');\nconst MyComponentWithFoo = withFooProp(MyComponent);\n// Rendering a MyComponentWithFoo will create a MyComponent with prop foo = true\n```\n\n### Example 2: Wrapping in another component\n\n```jsx\nimport React from 'react';\nimport addhoc from 'addhoc';\nimport MyComponent from './my-component';\n\nconst withDiv = addhoc(getWrappedComponent =\u003e\n  \u003cdiv\u003e\n    { getWrappedComponent() }\n  \u003c/div\u003e, 'WithDiv');\nconst MyComponentWithDiv = withDiv(MyComponent);\n// Rendering a MyComponentWithDiv will render a div that wraps a MyComponent\n```\n\n### Example 3: React 16 Context consumer\n\n```jsx\nimport React from 'react';\nimport addhoc from 'addhoc';\nimport MyComponent from './my-component';\n\nconst MyContext = React.createContext('DefaultValue');\nconst withMyContext = addhoc(getWrappedComponent =\u003e\n  \u003cMyContext.Consumer\u003e\n    { value =\u003e getWrappedComponent({ value }) }\n  \u003c/MyContext.Consumer\u003e, 'WithMyContext');\nconst MyComponentWithMyContext = withMyContext(MyComponent);\n\n// ...\nrender() {\n  return \u003cMyContext.Provider value='ProvidedValue'\u003e\n    \u003cMyComponentWithMyContext /\u003e\n  \u003c/MyContext.Provider\u003e\n}\n\n// Now, the MyComponentWithMyContext automatically gets a prop called `value` that gets the context value passed in from\n// the context.\n```\n\n### Example 4: Passing through configuration\n\nSometimes, you want to set some values as part of assembling the HOC and have those available in your render function.\nYou can pass arbitrary parameters after the `name` param to `addhoc` and they'll be passed through as additional\nparameters to your render function:\n\n```jsx\nimport addhoc from 'addhoc';\nimport MyComponent from './my-component';\n\nconst withFooProp = addhoc((getWrappedComponent, extra) =\u003e getWrappedComponent({ foo: extra }), 'WithFoo', 'EXTRA');\nconst MyComponentWithFoo = withFooProp(MyComponent);\n// Rendering a MyComponentWithFoo will get a `foo` prop with value `EXTRA`\n```\n\n## Testing\n\n```bash\nnpm test\n```\n\n[React documentation]: https://reactjs.org/docs/higher-order-components.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgodaddy%2Faddhoc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgodaddy%2Faddhoc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgodaddy%2Faddhoc/lists"}