Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
function Sticky({ children, as = "div", className = "", ...rest }) {
// 1️⃣ Get TOP & BOTTOM sentinels to associate with
const { topSentinelRef, bottomSentinelRef } = useContext(
StickySectionContext
);
const dispatch = useStickyActions();
// 2️⃣ Associate the current element with TOP & BOTTOM sentinels
// so that we can retrieve correct child target element
// from either a top sentinel or a bottom sentinel
const addStickyRef = stickyRef => {
dispatch.addStickyRef(topSentinelRef, bottomSentinelRef, stickyRef);
};
const Component = as;
// 3️⃣ No magic - Just apply the "sticky" position using class
return (
<Component
ref={addStickyRef}
className={styles.sticky + className || ` ${className}`}
{...rest}
>
{children}
</Component>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.