React Sticky Box

Sticky Boxes with sensible behaviour if the content is bigger than the viewport.

Documentation & Demo

react-sticky-box.codecks.io

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>
};

Changelog

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.