components-hooks

Hooks that are used across our repos.

Usage

1. useIntersectionObserver

import { useIntersectionObserver } from "@arcteryx/components-hooks";

const ProductTileWrapper = ({ product }) => {
   useIntersectionObserver({
    target: ref,
    deps: [product.id],
    rootMargin: "600px",
    onIntersect: ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        lazyloadProduct();
        if (observerElement && ref.current) {
          observerElement.unobserve(ref.current);
        }
      }
    },
  });

  return (
    <ProductTile product={product} />
  );
};