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