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>
};Contribute
- checkout the repo
cd /path/to/repo/packages/docsyarn install && yarn start
this will allow you to modify the react-sticky-box sources in packages/react-sticky-box/src and check the effects in the docs.