{"id":13394267,"url":"https://github.com/deepsweet/hocs","last_synced_at":"2025-03-13T20:31:25.751Z","repository":{"id":23439129,"uuid":"98926721","full_name":"deepsweet/hocs","owner":"deepsweet","description":":bento: Higher-Order Components for React","archived":true,"fork":false,"pushed_at":"2022-12-08T22:25:57.000Z","size":1937,"stargazers_count":2020,"open_issues_count":23,"forks_count":64,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-03-11T06:51:01.439Z","etag":null,"topics":["higher-order-component","hoc","react","react-native","recompose"],"latest_commit_sha":null,"homepage":"https://github.com/deepsweet/hocs/issues/31","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/deepsweet.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":"2017-07-31T20:24:34.000Z","updated_at":"2025-03-09T11:24:51.000Z","dependencies_parsed_at":"2022-08-07T11:00:31.353Z","dependency_job_id":null,"html_url":"https://github.com/deepsweet/hocs","commit_stats":null,"previous_names":[],"tags_count":83,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepsweet%2Fhocs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepsweet%2Fhocs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepsweet%2Fhocs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepsweet%2Fhocs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deepsweet","download_url":"https://codeload.github.com/deepsweet/hocs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478079,"owners_count":20297189,"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","hoc","react","react-native","recompose"],"created_at":"2024-07-30T17:01:14.342Z","updated_at":"2025-03-13T20:31:24.799Z","avatar_url":"https://github.com/deepsweet.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Higher-Order Components","*.js","实践库","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["React"],"readme":"# [@hocs](http://funkyimg.com/i/2wUmy.jpg)\n\n[![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs)\n\nA collection of [Higher-Order Components](https://facebook.github.io/react/docs/higher-order-components.html) for React, especially useful with [Recompose](https://github.com/acdlite/recompose).\n\n\u003e A Higher-Order Component is a function that takes a component and returns a new component.\n\n## Packages\n\n### Universal\n\n#### :non-potable_water: [omit-props](packages/omit-props)\n\nHelps to omit unnecessary context, state setters or anything else you don't want to propagate with `{...spread}`.\n\n#### :recycle: [with-lifecycle](packages/with-lifecycle)\n\nProvides a handy way to use some of [React Component Lifecycle](https://facebook.github.io/react/docs/react-component.html) methods.\n\n#### :hourglass: [debounce-handler](packages/debounce-handler)\n\nHelps to debounce handlers like `onChange`.\n\n#### :hourglass: [throttle-handler](packages/throttle-handler)\n\nHelps to throttle handlers like `onChange`.\n\n#### :watch: [safe-timers](packages/safe-timers)\n\nProvides safe versions of `setTimeout`, `setInterval`, `requestAnimationFrame` and `requestIdleCallback` which will be cleared/cancelled automatically before component is unmounted.\n\n#### :bell: [with-callback-on-change](packages/with-callback-on-change)\n\nInvokes a callback on prop change, useful to decouple side effects like `onChange` handler in a declarative way.\n\n#### :bell: [with-callback-on-change-while](packages/with-callback-on-change-while)\n\nInvokes a callback on prop change while condition is true, useful to decouple side effects like `onChange` handler in a declarative way and control loops.\n\n#### :bell: [with-callback-once](packages/with-callback-once)\n\nInvokes a callback once condition is true (while previous check was false), useful to decouple side effects like `onSuccess` or `onError` handlers in a declarative way.\n\n#### :mag: [with-log](packages/with-log)\n\nInjects `console.log` with props or any custom message into render.\n\n#### :mag: [with-debugger](packages/with-debugger)\n\nInjects `debugger` into render.\n\n### Browser\n\n#### :left_right_arrow: [with-match-media-props](packages/with-match-media-props)\n\nDynamically map [CSS Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) matches to boolean props using [`window.matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) ([Can I use?](https://caniuse.com/#search=matchmedia)).\n\n#### :left_right_arrow: [with-resize-observer-props](packages/with-resize-observer-props)\n\nDynamically map *component* size and position changes to props using [Resize Observer API](https://github.com/WICG/ResizeObserver) ([Can I use?](https://caniuse.com/#feat=resizeobserver) :see_no_evil:).\n\n#### :eyes: [with-intersection-observer-props](packages/with-intersection-observer-props)\n\nDynamically map visibility of a component to boolean props using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) ([Can I use?](https://caniuse.com/#feat=intersectionobserver)).\n\n#### :see_no_evil: [with-page-visibility-props](packages/with-page-visibility-props)\n\nDynamically map page visibility status to props using [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) ([Can I use?](https://caniuse.com/#feat=pagevisibility)).\n\n#### :electric_plug: [with-online-status-props](packages/with-online-status-props)\n\nDynamically map online/offline status to props using [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine) ([Can I use?](https://caniuse.com/#feat=online-status)).\n\n#### :no_entry: [prevent-handlers-default](packages/prevent-handlers-default)\n\nDecouples [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) side effect from handlers like form submitting or clicking a link.\n\n### React Native\n\n#### :left_right_arrow: [with-view-layout-props](packages/with-view-layout-props)\n\nDynamically map View layout dimensions to props using [`onLayout()`](https://facebook.github.io/react-native/docs/view.html#onlayout) handler.\n\n### …and more to come\n\nYou can [follow me on Twitter](https://twitter.com/deepsweet) for updates.\n\n## Development\n\n1. Create a new folder in `packages/`, let's say `with-foo`.\n2. See `package.json` in already existing packages and create new `with-foo/package.json`.\n3. Put source code in `with-foo/src/`, it will be transpiled and bundled into `with-foo/dist/`, `with-foo/lib/` and `with-foo/es/`.\n4. Put tests written with Jest in `with-foo/test/`.\n5. Put demo in `with-foo/demo/`, it will be rendered and wrapped with HMR.\n\nAvailable commands using [Start](https://github.com/deepsweet/start):\n\n```\nyarn start build \u003cpackage\u003e\nyarn start demo \u003cpackage\u003e\nyarn start test\nyarn start testWatch\nyarn start lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepsweet%2Fhocs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepsweet%2Fhocs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepsweet%2Fhocs/lists"}