react-sticky-box v2.0.5
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/docs
yarn 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.
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago