{"id":16918611,"url":"https://github.com/xnimorz/subscribe-event","last_synced_at":"2025-03-17T07:31:22.432Z","repository":{"id":57373981,"uuid":"54782854","full_name":"xnimorz/subscribe-event","owner":"xnimorz","description":"The easiest way to subscribe and unsubscribe to browser / node events","archived":false,"fork":false,"pushed_at":"2024-04-26T09:44:03.000Z","size":98,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-14T14:58:01.820Z","etag":null,"topics":["capturing-events","event-subscriber","events","subscriber","subscription","unsubscribe"],"latest_commit_sha":null,"homepage":"http://xnimorz.github.io/subscribe-event/","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/xnimorz.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":"2016-03-26T14:32:11.000Z","updated_at":"2024-09-23T23:43:00.000Z","dependencies_parsed_at":"2024-06-18T20:09:08.119Z","dependency_job_id":"2f49b199-08f4-465e-bc64-44a01d2fd61d","html_url":"https://github.com/xnimorz/subscribe-event","commit_stats":{"total_commits":12,"total_committers":4,"mean_commits":3.0,"dds":0.5833333333333333,"last_synced_commit":"8145fd5f986376eca10f1df10f2d48e6bd597352"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Fsubscribe-event","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Fsubscribe-event/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Fsubscribe-event/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Fsubscribe-event/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xnimorz","download_url":"https://codeload.github.com/xnimorz/subscribe-event/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243852429,"owners_count":20358267,"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":["capturing-events","event-subscriber","events","subscriber","subscription","unsubscribe"],"created_at":"2024-10-13T19:40:48.684Z","updated_at":"2025-03-17T07:31:22.146Z","avatar_url":"https://github.com/xnimorz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Subscribe-event\n\nSubscribe-event is the easiest way to subscribe either dom events in browser or node.js events.\n\nLive example: http://xnimorz.github.io/subscribe-event/\n\n#### Install\n\n```\nnpm install --save subscribe-event\n// or for yarn:\nyarn add subscribe-event\n```\n\nLibrary support es6, CommonJs, AMD modules\n\n#### Getting started\n\nStep 1: import module:\n\n```javascript\nimport subscribe from \"subscribe-event\";\n```\n\nStep 2: call subscrube function:\n\n```javascript\nconst unsubscribe = subscribe(document, \"scroll\", () =\u003e {\n  /* Do some job */\n});\n```\n\nStep 3: call unsubscibe, which returned from subscribe function, to dispose:\n\n```javascipt\n  unsubscribe();\n```\n\n#### API\n\n`subscribe` is a function, which receives 4 arguments:\n\n1.  element — is a HTMLElement such as document.body, document, etc., Node.js object or any another object, that triggers events.\n2.  event — is an event, such as `scroll`, `click`, `mousemove` etc.\n3.  eventCallback — a function called when event triggers\n4.  options — unessesary parameter, which provides more data to subscribe function. For example, when you using `subscribe` for HTMLElements you can capture events: `subscibe(document.querySelector('#a'), 'click', () =\u003e console.log('clicked'), true)`\n\n#### Usage with React\n\n```javascript\nimport React, { Component } from \"react\";\nimport subscribe from \"subscribe-event\";\n\nclass MyAmazingComponent extends Component {\n  componentDidMount() {\n    this.unsubscribeScroll = subscribe(document, \"scroll\", () =\u003e {\n      // do some job\n    });\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeScroll();\n  }\n\n  render() {\n    const { children } = this.props;\n\n    return \u003cdiv\u003e{children}\u003c/div\u003e;\n  }\n}\n```\n\nSubscribe-event is useful for capturing events:\n\n```javascript\nimport React, { Component } from \"react\";\nimport subscribe from \"subscribe-event\";\n\nclass MyAmazingComponent extends Component {\n  componentDidMount() {\n    this.unsubscribe = subscribe(\n      document,\n      \"scroll\",\n      () =\u003e {\n        // do some job\n      },\n      true\n    );\n  }\n\n  componentWillUnmount() {\n    this.unsubscribe();\n  }\n\n  render() {\n    const { children } = this.props;\n\n    return \u003cdiv\u003e{children}\u003c/div\u003e;\n  }\n}\n```\n\n#### Examples\n\nFor example in browser:\n\n```javascript\nimport subscribe from \"subscribe-event\";\n\nvar element = document.querySelector(\".my-button\");\n\nvar unsubscribe = subscribe(element, \"click\", e =\u003e {\n  console.log(e);\n});\n\n// code\n\nunsubscribe();\n```\n\nor\n\n```javascript\nimport subscribe from \"subscribe-event\";\n\nvar unsubscribe = subscribe(document, \"scroll\", e =\u003e {\n  console.log(e);\n});\n\n// code\n\nunsubscribe();\n```\n\nThis library supports old ie also (attachEvent/detachEvent).\n\nYou can define your custom event subscribe function:\n\n```javascript\nimport subscribe from 'subscribe-event';\n\nvar obj: {\n  eventSubscribe: function() {...},\n  eventUnsubscribe: function() {...}\n}\n\nvar customSubscribe = subscribe.define('eventSubscribe', 'eventUnsubscribe');\n\nvar customUnsubscribe = customSubscribe(obj, event, handler);\n\n// ...\n\ncustomUnsubscribe();\n```\n\nBy default subscribe-event works with: `addEventListener`, `detachEvent`, `on`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxnimorz%2Fsubscribe-event","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxnimorz%2Fsubscribe-event","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxnimorz%2Fsubscribe-event/lists"}