1.0.5 • Published 4 years ago
wil-react-sticky v1.0.5
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 --saveyarn
yarn add wil-react-stickyExample
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