Sticky - Overview - StickyBoundary.jsx

// no operation
const noop = () => {};

// 1️⃣ This is where the event fires
function StickyBoundary({
  as = "section",
  onChange = noop,
  onStuck = noop,
  onUnstuck = noop,
  children,
  ...rest
}) {
  const Component = as;

  // 2️⃣ Create TOP & BOTTOM sentinel refs
  const topSentinelRef = useRef(null);
  const bottomSentinelRef = useRef(null);
  
  // 3️⃣ Compute sentinel offsets
  const { bottomSentinelHeight, topSentinelMarginTop } = useSentinelOffsets(
    topSentinelRef
  );

  // 4️⃣ Observe TOP sentinels and fire un/stuck/change events
  useObserveTopSentinels(topSentinelRef, {
    events: {
      onChange,
      onStuck,
      onUnstuck
    }
  });

  // 5️⃣ Observe BOTTOM sentinels and fire un/stuck/change events
  useObserveBottomSentinels(bottomSentinelRef, {
    events: {
      onChange,
      onStuck,
      onUnstuck
    }
  });

  // 6️⃣ Save the sentinels to associate with the target later on
  const value = { topSentinelRef, bottomSentinelRef };

  // 7️⃣ `StickyBoudnary` simply wraps each event section with TOP & BOTTOM sentinels
  return (
    <StickySectionContext.Provider value={value}>
      <Component className={styles.sticky__section} {...rest}>
        <div
          ref={topSentinelRef}
          style={{ marginTop: `-${sentinelMarginTop}` }}
          className={styles.sticky__sentinel_top}
        >
          sentinel top
        </div>
        {children}
        <div
          ref={bottomSentinelRef}
          style={{ height: `${targetHeight}`}}
          className={styles.sticky__sentinel_bottom}
        >
          sentinel bottom
        </div>
      </Component>
    </StickySectionContext.Provider>
  );
}