Sticky - StickyViewport.jsx

function StickyViewport({ children, as = "div", ...rest }) {
  return (
   // 1️⃣ To provide context for Sticky component tree
    <StickyProvider>
      2️⃣ Real work starts here
      <StickyRoot as={as} {...rest}>
        {children}
      </StickyRoot>
    </StickyProvider>
  );
}

function StickyRoot({ children, as: Component = "div", ...rest }) {
  // 3️⃣ Get actions provided in `StickyViewport` via `StickyProvider`
  const dispatch = useStickyActions();

  // 4️⃣ Add the viewport reference to be used later in child component
    to be set as `root` option of IntersectionObserver
  const addContainerRef = containerRef => {
    dispatch.setContainerRef(containerRef);
  };

  return (
    <Component ref={addContainerRef} {...rest}>
      {children}
    </Component>
  );
}