1.0.9 • Published 1 year ago
@sarotam/react-sticky-box v1.0.9
React Sticky Box
Sticky Boxes with sensible behaviour if the content is bigger than the viewport.
Documentation & Demo
Quick Start
Use as a Component
import StickyBox from "react-sticky-box";
const Page = () => (
<div className="row">
<StickyBox offsetTop={20} offsetBottom={20}>
<div>Sidebar</div>
</StickyBox>
<div>Content</div>
</div>
);
Or via the useStickyBox
hook
import {useStickyBox} from "react-sticky-box";
const Page = () => {
const stickyRef = useStickyBox({offsetTop: 20, offsetBottom: 20})
<div className="row">
<aside ref={stickyRef}>
<div>Sidebar</div>
</aside>
<div>Content</div>
</div>
};