{"id":16349593,"url":"https://github.com/arojunior/react-hoc-factory","last_synced_at":"2025-11-11T14:30:14.647Z","repository":{"id":42839075,"uuid":"264002471","full_name":"arojunior/react-hoc-factory","owner":"arojunior","description":"React helper to create high order components","archived":false,"fork":false,"pushed_at":"2023-01-06T05:55:20.000Z","size":284,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T12:42:56.740Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/arojunior.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-14T19:08:39.000Z","updated_at":"2020-05-25T19:53:32.000Z","dependencies_parsed_at":"2023-02-05T11:31:18.558Z","dependency_job_id":null,"html_url":"https://github.com/arojunior/react-hoc-factory","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arojunior%2Freact-hoc-factory","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arojunior%2Freact-hoc-factory/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arojunior%2Freact-hoc-factory/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arojunior%2Freact-hoc-factory/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arojunior","download_url":"https://codeload.github.com/arojunior/react-hoc-factory/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239590297,"owners_count":19664457,"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-11T01:00:26.305Z","updated_at":"2025-11-11T14:30:14.605Z","avatar_url":"https://github.com/arojunior.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Create high order components in a functional way\n\n\u003e Disclaimer: this repository is for study purposes and that's why the lib isn't on `npm`\n\nDo you know [Recompose](https://github.com/acdlite/recompose)? It is fully inspired on that library.\nThe main difference is that the only method exported is `withProps`, which was changed as you can see bellow.\n\n### Install\n```sh\nyarn add git://github.com/arojunior/react-hoc-factory#0.1.1\n```\n\n### `withProps()`\n\n```js\nwithProps(\n  createProps: (ownerProps: Object) =\u003e Object\n): HigherOrderComponent\n```\n\nOR\n\n```js\n({ Component: ReactElement }) =\u003e withProps(\n  createProps: (ownerProps: Object) =\u003e Object\n)(Component): HigherOrderComponent\n```\n\n#### Usage 1\n\n```js\n// AppContainer.js\nimport { withProps } from './utils/hocFactory';\nimport { useFoo, useGithub } from './AppService';\nimport AppComponent from './AppComponent';\n\nconst AppContainer = withProps({\n  useFoo,\n  useGithub,\n  ...rest\n})(AppComponent);\n\nexport default AppContainer;\n```\n\n```js\n// index.js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport AppContainer from './AppContainer';\n\nrender(\u003cAppContainer /\u003e, document.getElementById('root'));\n```\n\n\u003e In this case you can reuse the component with other container, but the container file is importing the component, so you can't reuse it\n\n#### Usage 2\n\n```js\n// AppEnhance.js\nimport { withProps } from './utils/hocFactory';\nimport { useFoo, useGithub } from './AppService';\n\nconst AppEnhance = withProps({\n  useFoo,\n  useGithub,\n  ...rest\n});\n\nexport default AppEnhance;\n```\n\n```js\n// AppContainer.js\nimport AppEnhance from './AppEnhance';\nimport AppComponent from './AppComponent';\n\nexport default AppEnhance(AppComponent);\n```\n\n```js\n// index.js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport AppContainer from './AppContainer';\n\nrender(\u003cAppContainer /\u003e, document.getElementById('root'));\n```\n\n\u003e Here you need a third file just to prevent coupling. In this case you are able to reuse both, component and the behavior\n\n#### Usage 3\n\nThe main difference from `Recompose` is here, you can take advantage from the curried method implemented and prevent coupling with just two files\n\n```js\n// AppContainer.js\nimport { withProps } from './utils/hocFactory';\nimport { useFoo, useGithub } from './AppService';\n\nconst AppContainer = ({ Component, ...rest }) =\u003e withProps({\n  useFoo,\n  useGithub,\n  ...rest\n})(Component);\n\nexport default AppContainer;\n```\n\n```js\n// index.js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport AppContainer from './AppContainer';\nimport AppComponent from './AppComponent';\n\nrender(\u003cAppContainer Component={AppComponent} otherProp=\"it-works\" /\u003e, document.getElementById('root'));\n```\n\nReference: [https://github.com/arojunior/react-hooks-composition-proposal](https://github.com/arojunior/react-hooks-composition-proposal) ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farojunior%2Freact-hoc-factory","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farojunior%2Freact-hoc-factory","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farojunior%2Freact-hoc-factory/lists"}