react-sticky-box

Boxes that behave nicely while scrolling

Last updated 6 years ago by danielberndt .

ISC · Repository · Bugs · Original npm · Tarball · package.json

$ npm install react-sticky-box

SYNC missed versions from official npm registry.

Version Downloads/Week Minified Bundlesize Minified Gzipped Bundlesize

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

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.

Current Tags

2.0.5 ... latest (a year ago)

54 Versions

Maintainers (1)

Downloads

Total 6

Today 1

This Week 1

This Month 1

Last Day 0

Last Week 0

Last Month 1

Dependencies (3)

Dev Dependencies (29)

@babel/core ^7.0.0
@babel/plugin-proposal-class-properties ^7.1.0
@babel/plugin-transform-runtime ^7.1.0
@babel/preset-env ^7.1.0
@babel/preset-react ^7.0.0
@danielberndt/exec ^1.1.0
babel-eslint ^9.0.0
babel-plugin-minify-dead-code-elimination ^0.5.0
babel-plugin-transform-react-remove-prop-types ^0.4.19
concurrent-transform ^1.0.0
docz ^0.12.5
docz-plugin-css ^0.11.0
eslint ^5.0.0
eslint-config-react-app ^3.0.4
eslint-plugin-flowtype ^2.34.1
eslint-plugin-import ^2.6.0
eslint-plugin-jsx-a11y ^6.0.0
eslint-plugin-react ^7.1.0
gulp ^3.9.1
gulp-awspublish ^3.4.0
gulp-awspublish-router ^0.2.0
gulp-cloudfront-invalidate-aws-publish ^1.0.0
husky ^1.1.2
lint-staged ^7.3.0
prettier-eslint-cli ^4.1.1
rollup ^0.66.6
rollup-plugin-babel ^4.0.3
rollup-plugin-commonjs ^9.2.0
rollup-plugin-node-resolve ^3.4.0

Dependents (2)

© 2010 - cnpmjs.org x YWFE | Home | YWFE