https://github.com/codecks-io/react-sticky-box

Sticky boxes for contents of all sizes
https://github.com/codecks-io/react-sticky-box

Last synced: about 1 year ago
JSON representation

Sticky boxes for contents of all sizes

• Host: GitHub
• URL: https://github.com/codecks-io/react-sticky-box
• Owner: codecks-io
• License: isc
• Created: 2015-06-08T09:09:56.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2024-01-20T04:49:05.000Z (over 2 years ago)
• Last Synced: 2025-04-26T03:31:12.968Z (about 1 year ago)
• Language: TypeScript
• Homepage: https://react-sticky-box.codecks.io/
• Size: 1.32 MB
• Stars: 490
• Watchers: 4
• Forks: 45
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![Version](https://badgen.net/npm/v/react-sticky-box)

![Downloads/Week](https://badgen.net/npm/dw/react-sticky-box)

![Minified Bundlesize](https://badgen.net/bundlephobia/min/react-sticky-box)

![Minified Gzipped Bundlesize](https://badgen.net/bundlephobia/minzip/react-sticky-box)

# React Sticky Box

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

## Documentation & Demo

**[react-sticky-box.codecks.io](https://react-sticky-box.codecks.io/)**

## Quick Start

### Use as a Component

```jsx

import StickyBox from "react-sticky-box";

const Page = () => (

  


    

      
Sidebar

    

    
Content

  

);

```


### Or via the `useStickyBox` hook

```jsx

import {useStickyBox} from "react-sticky-box";

const Page = () => {

  const stickyRef = useStickyBox({offsetTop: 20, offsetBottom: 20})

  


    

      
Sidebar

    

    
Content

  

};

```

---


[Changelog](https://react-sticky-box.codecks.io/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.