Interserver
IntersectionObserver simplified
Interserver
is an easy way to check if a dom element is intersecting the viewport.
Features
- Tiny (~1kb minified)
- TypeScript ready
- Framework agnostic (easily integrate
Interserver
with your favourite framework) - React companion package (
interserver-react
) - Svelte companion package (
interserver-svelte
)
Installation
With yarn
:
yarn add interserver
With npm
:
npm install --save interserver
Usage
; const container = document; // The handler is fired whenever `isIntersecting` changes { if isIntersecting console } const unobserve = ; // Cancel observation after five seconds;
If you want to run cancel the observation after the first time, the container is visible, you can pass the once
option to interserver
:
; const container = document; { if isIntersecting console } ;
You can also specify margins around the element (top
, right
, bottom
, left
), so that the handler will fire when the container is the specified margin away from the viewport:
; const container = document; { if isIntersecting console } ;
API
/** * Observe an element and invoke a callback, when it is intersecting the viewport. * * @param container The DOM element that is being observed. * @param onChange The callback handler, * that will be called when the `isIntersecting` state changes. * @param options The observer options, * consisting of offset margins for the container (`top`, `right`, `bottom`, `left`) * and `once`. With `once` set to `true`, * observing stops after the element is first intersecting. * * @returns The `unobserve` function. Observation is canceled, when it is called. */; /** * The callback handler, that will be called when the `isIntersecting` state changes. */; /** * The observer options, * consisting of offset margins for the container (`top`, `right`, `bottom`, `left`) * and `once`. * With `once` set to `true`, observing stops after the element is first intersecting. */ /** * The `unsubscribe` function returned from a call to `interserver`. * It should be called, when the observation is not needed any more, * to prevent memory leaks. * If `InterserverOptions.once` is set to true, the `unsubscribe` * function will be called internally. */;
License
MIT