wil-react-sticky

Sticky Component For Header, Sidebar, Section list, etc. Useful when a sidebar is too tall or too short compared to the rest of the content.

Install

npm

npm install wil-react-sticky --save

yarn

yarn add wil-react-sticky

Example

1. Sidebar sticky

2. Sidebar sticky box 2

3. Section list

4. Header sticky

5. Render Props (demo change background color)

Usage

import React from "react";
import Sticky from "wil-react-sticky";
 
class BasicSticky extends React.Component {
  render() {
    return (
      <Sticky>
        <header className="header">Header sticky</header>
      </Sticky>
    )
  }

API

Prop	Type	Default	Description
containerSelectorFocus	string	-	Move according to the parent component (value same querySelector vanilla javascript). Example Sidebar sticky
offsetTop	number	0	Offset from the top of the viewport (in pixels)
zIndex	number	10	The z-index of the Sticky
stickyEnableRange	Array<number>	[0, Infinity]	Sticky working in [min-width, max-width]
children	ReactNode or (isSticky: boolean) => ReactNode	-	ReactNode or render props (example render props)
onChange	(isSticky: boolean) => void	-	onChange when position fixed

License

MIT © wiloke1