{"id":25282835,"url":"https://github.com/paulsenon/in-view","last_synced_at":"2025-04-06T13:47:38.555Z","repository":{"id":185632595,"uuid":"315612360","full_name":"PaulSenon/in-view","owner":"PaulSenon","description":"Simple dom intersectionObserver wrapper for easy use ","archived":false,"fork":false,"pushed_at":"2024-06-02T21:27:01.000Z","size":47,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T19:52:00.793Z","etag":null,"topics":["intersection-observer","inview"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PaulSenon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-11-24T11:33:50.000Z","updated_at":"2024-06-02T21:28:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"e8967726-3d82-4803-b5f8-414ca7338f43","html_url":"https://github.com/PaulSenon/in-view","commit_stats":null,"previous_names":["paulsenon/in-view"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulSenon%2Fin-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulSenon%2Fin-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulSenon%2Fin-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulSenon%2Fin-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PaulSenon","download_url":"https://codeload.github.com/PaulSenon/in-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247492511,"owners_count":20947544,"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":["intersection-observer","inview"],"created_at":"2025-02-12T19:52:05.410Z","updated_at":"2025-04-06T13:47:38.534Z","avatar_url":"https://github.com/PaulSenon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What is this ?\n\nBecause the 'in-view' lib used over different euronews-front apps is no longer maintained and has issues, we decided to create our own version, dependency free, and using IntersectionObserver for better performances.\n\n# To do what ?\n\nMainly to lazyload stuff, but it can also be used to deactivate/unload stuff that are no more on screen since you'll be able to register callback to 5 different events:\n\n* 'entering' (when something is coming inside the viewport)\n* 'entered' (when something is plainly in the viewport)\n* 'leaving' (when something is leaving the viewport)\n* 'left' (when something is plainly outside of the viewport)\n* 'visible' (when something is 'entering' or 'leaving' or 'entered') **\u003c= best choice for lazyload**\n\n# How do I use it ?\n\n### 1) install the lib\n\n(TODO)\n\n### 2) Require it where you need it\n\nIn some js file you'll have to import the lib `InView` class.\nHere you may want to use the `import` or `require` syntax:\n\n#### import\n\n* `import InView from 'in-view';` _(needs to to checked)_\n\n#### require\n\n* `const InView = require('in-view');`\n\n### 3) Use it  (doc and examples)\n\nNow that you have access to the InView class you can make instances such as:\n\n```JavaScript\nconst inView = new InView({\n    rootElement: document.getElementById('my-observer-zone'),\n    rootMarginTop: 1,\n    rootMarginRight: 2,\n    rootMarginBottom: 3,\n    rootMarginLeft: 4, \n});\n```\n\nIt takes an object as unique parameter. \nHere is the doc for each property of this object:\n\n| Property | Type | Default | Description |\n|:---------|:-----|:--------|:------------|\n|`rootElement`|**DOM element**|viewport|The area that will trigger your callbacks when other elements intersect it. By default it's the viewport, so let it blank if you just need basic lazyload :)|\n|`rootMarginTop`|**number** (in px)|`0`|Used to extend the observer hitbox on top. You can set both positive or negative values.|\n|`rootMarginRight`|**number** (in px)|`0`|Used to extend the observer hitbox on right. You can set both positive or negative values.|\n|`rootMarginBottom`|**number** (in px)|`0`|Used to extend the observer hitbox on bottom. **This is typically the prop you'll set in a basic lazyload scenario. A positive value will make callback triggered before you see the element in viewport.** You can set both positive or negative values.|\n|`rootMarginLeft`|**number** (in px)|`0`|Used to extend the observer hitbox on left. You can set both positive or negative values.|\n\nBecause all properties are optional, the following instantiation is totally valid, and will trigger any callback for stuff that enter/leave the viewport (without any offsets/margins).\n\n```JavaScript\nconst inView = new InView();\n```\n\nBut you need to register your callback now !\nThen here is a practical example of how can use this lib for a basic lazyload of images 200px before they enter the viewport:\n\n```JavaScript\nconst inView = new InView({ rootMarginBottom: 200 });\n\nconst myObjectsToLazyload = document.querySelectorAll('img.lazyload'); // no worry, even this HTMLCollection (not really an array) is handled by the lib\n\ninView.onceVisible(myObjectToLazyload, (entry) =\u003e {\n    const element = entry.target;\n    element.src = element.dataset.src; // For example, for images, I just set img src with the data-src so the picture loads\n\n    // the following lines are not required because you are using ONCEVisible, but if you were using ONVisible you might want on implement something like this:\n        // // here we don't want to trigger the lazyload anymore on this particular image so we unregister it\n        // inView.unobserveEvent(element, 'visible');\n        // // since here we did not registered callback on other events than 'visible', we can simply do: inView.unobserve()\n});\n```\n\n\u003e Note: prefer using `onVisible` (or `onceVisible`) over `onEntering` (or `onceEntering`) for lazyloading, because, considering the example above, if user refreshes with images already in viewport (page not scrolled to top) you'll want to trigger their lazyload when page loads.\n\nFrom your `InView` instance you have access to several methods. Here is the detail:\n\n### The registering methods:\n\nThey are used to register a callback to a specific intersection event with the inView rootElement\n\n#### ON: (will be triggering each time)\n\n* `onEntered(elementOrElements, callback)`\n* `onEntering(elementOrElements, callback)`\n* `onLeaving(elementOrElements, callback)`\n* `onVisible(elementOrElements, callback)`: _'entered' + 'entering' + 'leaving' but it ensure it is called only once each time it's visible_\n* `onLeft(elementOrElements, callback)`\n* `onNotVisible(elementOrElements, callback)`: _alias onLeft()_\n\n#### ONCE: (will be trigger once then unobserved)\n\n* `onceEntered(elementOrElements, callback)`\n* `onceEntering(elementOrElements, callback)`\n* `onceLeaving(elementOrElements, callback)`\n* `onceVisible(elementOrElements, callback)`: _'entered' + 'entering' + 'leaving' but it ensure it is called only once each time it's visible_\n* `onceLeft(elementOrElements, callback)`\n* `onceNotVisible(elementOrElements, callback)`: _alias onLeft()_\n\n| Parameter | Type | Default | Description |\n|:----------|:-----|:--------|:------------|\n|`elementOrElements`|Array[DomElem] OR DomElem|**REQUIRED**|The element(s) to observe|\n|`callback`|Function|**REQUIRED**|The callback giving you the `entry` object from IntersectionObserver as param. You can access the triggering DomElem by accessing `entry.target`|\n\n### The UNregistering methods:\n\nThey are used to unregister callback on different levels:\n\n* `unobserveAll()`: To unregister all callbacks of all observed elements. Basically reset your InView instance.\n* `unobserve(elementOrElements)`: To unregister all callbacks of a single (or a group) of element(s) (Because you may have mutiple callback for one event: e.g. 'entering', 'leaving')\n* `unobserveEvent(elementOrElements, event)`: To unregister on single callback on a single (or a group) of element(s) (but leave all other callbacks)\n\n| Parameter | Type | Default | Description |\n|:----------|:-----|:--------|:------------|\n|`elementOrElements`|Array[DomElem] OR DomElem|**REQUIRED**|The element(s) to observe|\n|`event`|String|**REQUIRED**|The event a callback is attached to. Must be one of [`'entered'`, `'entering'`, `'leaving'`, `'left'`, `'visible'`]|\n\nAnd that pretty much it...\n\nEnjoy :)\n\n# How to contribute ?\n\n* clone this repo\n* do `yarn` to install dependencies (just for jest) \n* create branch from master\n* dev\n* create Pull Request toward master\n* wait for one review \u0026 for CI to pass\n* merge master\n* tag a new version (using semantic versioning 2.0)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulsenon%2Fin-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaulsenon%2Fin-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulsenon%2Fin-view/lists"}