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

``bash
npm install wil-react-sticky --save
`

yarn

`bash
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

`js
import React from "react";
import Sticky from "wil-react-sticky";

class BasicSticky extends React.Component {
render() {
return (



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 | [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