{"id":13394296,"url":"https://github.com/uzairfarooq/arrive","last_synced_at":"2025-05-13T23:10:28.506Z","repository":{"id":13458562,"uuid":"16148232","full_name":"uzairfarooq/arrive","owner":"uzairfarooq","description":"Watch for DOM elements creation and removal","archived":false,"fork":false,"pushed_at":"2024-12-19T14:10:35.000Z","size":206,"stargazers_count":884,"open_issues_count":17,"forks_count":100,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-10T07:19:46.313Z","etag":null,"topics":["detect","dom","dynamic","insertion","javascript","jquery","listen","livequery","mutation-observer","mutation-observers","mutationobserver","nodejs","removal","watch"],"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/uzairfarooq.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":"2014-01-22T18:31:30.000Z","updated_at":"2025-05-08T03:35:04.000Z","dependencies_parsed_at":"2025-04-10T09:51:04.397Z","dependency_job_id":"5fcac110-011f-4256-9838-46a8f3200d97","html_url":"https://github.com/uzairfarooq/arrive","commit_stats":{"total_commits":125,"total_committers":16,"mean_commits":7.8125,"dds":0.4,"last_synced_commit":"97b5a411edad438c961cd8f896b1e4c6c00613f0"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uzairfarooq%2Farrive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uzairfarooq%2Farrive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uzairfarooq%2Farrive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uzairfarooq%2Farrive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uzairfarooq","download_url":"https://codeload.github.com/uzairfarooq/arrive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254042316,"owners_count":22004901,"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":["detect","dom","dynamic","insertion","javascript","jquery","listen","livequery","mutation-observer","mutation-observers","mutationobserver","nodejs","removal","watch"],"created_at":"2024-07-30T17:01:15.226Z","updated_at":"2025-05-13T23:10:23.470Z","avatar_url":"https://github.com/uzairfarooq.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# arrive.js\n[![CDNJS version](https://img.shields.io/cdnjs/v/arrive.svg)](https://cdnjs.com/libraries/arrive)\n\nA lightweight JS library for watching DOM element creation and removal using [Mutation Observers](https://developer.mozilla.org/en/docs/Web/API/MutationObserver).\n\n## Key Features\n- Watch for element creation and removal in the DOM\n- Zero dependencies\n- Lightweight implementation\n- Flexible configuration options\n\n## Installation\n\n```bash\nnpm install arrive --save   # Using NPM\n```\nOr [download arrive.min.js](https://raw.githubusercontent.com/uzairfarooq/arrive/master/minified/arrive.min.js) directly.\n\n## Usage\n\n### Watch for New Elements\n```javascript\n// Basic usage\ndocument.arrive(\".test-elem\", function(newElem) {\n    // newElem is the newly created element\n});\n\n// Watch within a specific container (recommended for better performance)\ndocument.querySelector(\".container\").arrive(\".test-elem\", function(newElem) {\n    // More specific watching\n});\n\n// you can bind event to multiple elements at once\n// this will bind arrive event to all the elements returned by document.querySelectorAll()\ndocument.querySelectorAll(\".box\").arrive(\".test-elem\", function(newElem) {\n});\n```\n\n### Promise-based Usage\n\u003e **Important:** Promise-based syntax resolves only for the first matching element. For monitoring multiple or continuous element creation, use the callback approach described above.\n\u003e \n\u003e Note: There's no need to use the `onceOnly` option with Promise-based usage as Promises inherently resolve only once.\n\n```javascript\nvar newElem = await document.arrive(\".test-elem\");\n// do stuff with the element\n```\n\n### Options\nThe `arrive` event accepts an optional configuration object:\n\n```javascript\n{\n    // Watch for changes to existing elements' attributes\n    fireOnAttributesModification: false,    \n\n    // Fire callback only once, then auto-unbind\n    onceOnly: false,                        \n\n    // Fire callback for elements that already exist in the DOM\n    existing: false,                        \n\n    // Call callback with null after specified milliseconds and Auto-unbind  (0 = disabled)\n    timeout: 0                              \n}\n```\n\nExample:\n```javascript\ndocument.arrive(\".test-elem\", {\n    fireOnAttributesModification: true,  // Watch for attribute changes\n    existing: true,                      // Include existing elements\n    onceOnly: true,                      // Fire callback only once\n    timeout: 5000                        // Auto-unbind after 5 seconds call callback with null\n}, (newElem) =\u003e {\n    console.log(newElem);\n});\n```\n\n### Watch for Elements Removal\nUse the `leave` event to detect when elements are removed from the DOM.\n\n\u003e **Important:** Due to MutationObserver API limitations, the selector must be direct (e.g., `.test-elem`) and cannot use descendant or child combinators (e.g., `.page .test-elem` is not allowed).\n\n```javascript\n// Watch for element removal\ndocument.querySelector(\".container-1\").leave(\".test-elem\", function(removedElem) {\n    // removedElem is the element that was just removed\n});\n\n// With options\ndocument.querySelector(\".container-1\").leave(\".test-elem\", {\n    onceOnly: true,    // Fire once per element\n    timeout: 5000      // Auto-unbind after 5 seconds\n}, function(removedElem) {\n    // removedElem is the element that was just removed\n});\n```\n\n### Unbinding Event Listeners\nFor better performance, make sure to remove listeners when they are no longer needed:\n\n```javascript\n// unbind all arrive events on document element\ndocument.unbindArrive();\n\n// unbind all arrive events on a specific element\ndocument.querySelector(\".box\").unbindArrive();\n\n// unbind all arrive events on document element which are watching for \".test-elem\" selector\ndocument.unbindArrive(\".test-elem\");\n\n// unbind only a specific callback\ndocument.unbindArrive(callbackFunc);\n\n// unbind only a specific callback on \".test-elem\" selector\ndocument.unbindArrive(\".test-elem\", callbackFunc);\n\n// unbind all arrive events (registered on any element)\nArrive.unbindAllArrive();\n\n// Unbind all leave events on document element\ndocument.unbindLeave();\n\n// Unbind all leave events (registered on any element)\nArrive.unbindAllLeave();\n```\n\n## jQuery Support\nIf you use jQuery, you can call all arrive functions on jQuery elements as well:\n```javascript\n// watch for element creation in the whole HTML document\n$(document).arrive(\".test-elem\", function(newElem) {\n  // Note: newElem is a javascript element not a jQuery element\n});\n\n// this will attach arrive event to all elements returned by $(\".container-1\")\n$(\".container-1\").arrive(\".test-elem\", function(newElem) {\n  // Note: newElem is a javascript element not a jQuery element\n});\n```\n\n## Browser Support\narrive.js is built over [Mutation Observers](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) which is introduced in DOM4. It's supported in latest versions of all popular browsers.\n\n| Browser           | Supported Versions\n| ------------------|:-----------------:|\n| Google Chrome     | 27.0+             |\n| Firefox           | 14.0+             |\n| Safari            | 6.1+              |\n| Internet Explorer | 11.0+             |\n| Opera             | 14.0+             |\n\n## Contributing\n#### Report a bug / Request a feature\nIf you want to report a bug or request a feature, use the [Issues](https://github.com/uzairfarooq/arrive/issues) section. Before creating a new issue, search the existing ones to make sure that you're not creating a duplicate. When reporting a bug, be sure to include OS/browser version and steps/code to reproduce the bug, a [JSFiddle](http://jsfiddle.net/) would be great.\n\n#### Development\nIf you want to contribute to arrive, here is the workflow you should use:\n\n1. Fork the repository.\n2. Clone the forked repository locally.\n3. From the `dev` branch, create and checkout a new feature branch to work upon. (If you want to work on some minor bug fix, you can skip this step and continue to work in `dev` branch)\n4. Make your changes in that branch (the actual source file is `/src/arrive.js`).\n5. If sensible, add some jasmine tests in `/tests/spec/arriveSpec.js` file.\n6. Make sure there are no regressions by executing the unit tests by opening the file `/tests/SpecRunner.html` in a browser. There is a button 'Run tests without jQuery' at the top left of th page, click that button to make sure that the tests passes without jQuery. Run the test cases in all major browsers.\n7. Push the changes to your github repository.\n8. Submit a pull request from your repo back to the original repository.\n9. Once it is accepted, remember to pull those changes back into your develop branch!\n\n#### Some features/bugs you can send pull requests for\n- [#70](https://github.com/uzairfarooq/arrive/issues/70): Add Typescript types to the project\n- [#69](https://github.com/uzairfarooq/arrive/issues/69): Option to watch for text change\n\n**Keywords**\n\njavascript, js, jquery, node.js, watch, listen, creation, dynamically, removal, new, elements, DOM, dynamic, detect, insertions, event, bind, live, livequery\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuzairfarooq%2Farrive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuzairfarooq%2Farrive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuzairfarooq%2Farrive/lists"}