Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
);
}
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.