React compatible sticky block component

Makes block sticky to it's parent block. To see how it works, please, see the demo.

Installation and setup

1. Install component:

If you want to install package from npmjs registry(recommended) use:

npm i react-sticky-to-parent

yarn add react-sticky-to-parent

pnpm add react-sticky-to-parent

If you want to install package from GitHub packages use:

npm install @siibragimov/react-sticky-to-parent

Note: Don't forget to configure registry for installing packages from GitHub. Use .npmrc file or use command:

npm config set registry https://npm.pkg.github.com/

2. Import CSS.

For React:

  // in entry point (main.tsx)
  import '../node_modules/react-sticky-to-parent/dist/react-sticky-to-parent.css';

Note: If you have problems with import, check the file path and especially the prefix.

3. Define styles for block(Sidebar) container. See the `App.tsx`.

Note: the .container should have full height of the column, component sticks to it and moves "inside" it.

4. Import component in your code:

import { ReactStickyToParent } from 'react-sticky-to-parent'

5. Wrap content you want to be sticky.

Define ref for the parent container and pass it to react-sticky-to-parent component props.

  const container = useRef<HTMLElement>(null);

Example:

<aside ref={container} className="container">
  <ReactStickyToParent parent={container}>
    <div className="sticky">
      <!-- YOUR CONTENT -->
    </div>
  </ReactStickyToParent>
</aside>

Contributing

To run in development mode

npm run dev

Use for build component

npm run build

and follow the instruction in console to open the test page.

To generate types you can use:

npm run types

siibragimov/react-sticky-to-parent