react-sticky
Make your React components sticky!
Demos
Highlights
- Fully-nestable, allowing you to build awesome layouts with familiar syntax
- Sane defaults so you spend less time configuring
- Allows multiple Sticky elements on the page at once with compositional awareness!
Installation
npm install react-sticky
Overview & Basic Example
<Sticky />
elements should contain a function as its immediate child, which itself returns an element.
This function will be called based on events of the parent <StickyContainer />
, and will provide
sane defaults for basic sticky functionality, along with a hook to apply your own logic / customizations.
app.js
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
...
class App extends React.Component ({
render() {
return (
...
<StickyContainer>
...
<Sticky>
{
({ isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight }) => {
return (
<header style={style}>
...
</header>
)
}
}
</Sticky>
...
</StickyContainer>
...
);
},
});
When the "stickiness" becomes activated, the arguments to the sticky function
are modified. Similarly, when deactivated, the arguments are once again restored accordingly.
<StickyContainer />
Props
<StickyContainer />
supports all valid <div />
props.
<Sticky />
Props
relative (default: false)
Set relative
to true
if the <Sticky />
element will be rendered within
an overflowing <StickyContainer />
(e.g. style={{ overflowY: 'auto' }}
) and you want
the <Sticky />
behavior to react to events only within that container.
disableCompensation (default: false)
Set disableCompensation
to true
if you do not want your <Sticky />
to correct any
jumpy behavior as its attachment changes across sticky state changes.
app.js
<StickyContainer>
...
<Sticky disableCompensation>
{ ({ isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight }) => (...) }
</Sticky>
...
</StickyContainer>
disableHardwareAcceleration (default: false)
When disableHardwareAcceleration
is set to true
, the <Sticky />
element will not use hardware acceleration (e.g. transform: translateZ(0)
). This setting is not recommended, and can usually be
avoided by improving the structure of your DOM.
app.js
<StickyContainer>
...
<Sticky disableHardwareAcceleration>
{ ({ isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight }) => (...) }
</Sticky>
...
</StickyContainer>
License
MIT