Sticky - Overview - useSentinelOffsets.jsx

// 1️⃣
function useSentinelOffsets(topSentinelRef) {
  const { stickyRefs } = useStickyState();
  const [bottomSentinelHeight, setBottomSentinelHeight] = useState("");
  const [topSentinelMarginTop, setTopSentinelMarginTop] = useState("");

  // 2️⃣
  useEffect(() => {
    // 3️⃣
    const stickyNode = stickyRefs.get(topSentinelRef.current);

    // 4️⃣
    const topStyle = window.getComputedStyle(stickyNode);
    const getProp = name => topStyle.getPropertyValue(name);
    const paddingtop = getProp("padding-top");
    const paddingBottom = getProp("padding-bottom");
    const height = getProp("height");
    const marginTop = getProp("margin-top");

    // 5️⃣
    const bottomSentinelHeight = `calc(${marginTop} +
        ${paddingtop} +
        ${height} +
        ${paddingBottom})`;

    setBottomSentinelHeight(bottomSentinelHeight);
    setTopSentinelMarginTop(marginTop);
  }, [stickyRefs, topSentinelRef]);

  // 6️⃣
  return { bottomSentinelHeight, topSentinelMarginTop };
}