hd-utils/lib/utils/browser/intersectionObserver.d.ts

A handy utils for modern JS developers

/**
 * This code was copied from
 * https://github.com/thebuilder/react-intersection-observer/blob/main/src/observe.ts
 */
export type ObserverInstanceCallback = (inView: boolean, entry: IntersectionObserverEntry, entries?: IntersectionObserverEntry[]) => void;
/**
 * What should be the default behavior if the IntersectionObserver is unsupported?
 * Ideally the polyfill has been loaded, you can have the following happen:
 * - `undefined`: Throw an error
 * - `true` or `false`: Set the `inView` value to this regardless of intersection state
 * **/
export declare function defaultFallbackInView(inView: boolean | undefined): void;
/**
 * Convert the options to a string Id, based on the values.
 * Ensures we can reuse the same observer when observing elements with the same options.
 * @param options
 */
export declare function optionsToId(options: IntersectionObserverInit): string;
/**
   * @param elementOrElements - DOM Element or Elements to observe
   * @param callback - Callback function to trigger when intersection status changes
   * @param options - Intersection Observer options
   * @param fallbackInView - Fallback inView value.
   *
   * @example
   * will start observing the element if its on the view port
   * `
   *
  const observer = observeFunc(
  document.body,
  (isInView, entry) => {
  // do something
  },
  // document or any HTML element of choice
  { root: document }
  );
  
  // When called it will unobserve the element (for cleanup).
  observer();
   * `
   * @return Function - Cleanup function that should be triggered to unregister the observer
   */
export default function observe(elementOrElements: Element | Element[], callback: ObserverInstanceCallback, options?: IntersectionObserverInit, fallbackInView?: boolean): () => void;