# react-sticky-box

> Boxes that behave nicely while scrolling

Latest version **2.0.5** (published 2023-10-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-sticky-box
pnpm add react-sticky-box
yarn add react-sticky-box
bun add react-sticky-box
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2023-10-23 |
| First published | 2015-06-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 503 |
| Author | Daniel Berndt |
| Maintainers | danielberndt |
| Keywords | react, scroll, sticky, fixed |

## Links

- npm: https://www.npmjs.com/package/react-sticky-box
- Repository: https://github.com/codecks-io/react-sticky-box
- Homepage: https://github.com/codecks-io/react-sticky-box#readme
- Issues: https://github.com/codecks-io/react-sticky-box/issues
- npm.io page: https://npm.io/package/react-sticky-box

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.5 (latest) — 2023-10-23
- 2.0.4 — 2023-04-14
- 2.0.3 — 2023-04-14
- 2.0.2 — 2023-04-13
- 2.0.1 — 2023-04-13
- 2.0.0 — 2023-02-06
- 2.0.0-0 — 2023-02-05
- 1.0.2 — 2022-04-06
- 1.0.1 — 2022-03-19
- 1.0.0 — 2022-03-06
- 1.0.0-next.1 — 2022-03-06
- 1.0.0-next.0 — 2022-03-06
- 0.9.3 — 2020-02-19
- 0.9.2 — 2019-12-02
- 0.9.1 — 2019-11-25
- … 39 more at https://npm.io/package/react-sticky-box/versions

## 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 = () => (
  <div className="row">
    <StickyBox offsetTop={20} offsetBottom={20}>
      <div>Sidebar</div>
    </StickyBox>
    <div>Content</div>
  </div>
);
```

### Or via the `useStickyBox` hook

```jsx
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](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.

---
_Source: https://npm.io/package/react-sticky-box · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._