react-sticky-17

This is a fork of react-sitcky

For the last two years, react-sticky has not been updated. With React version 17 now out, componentWillMount has now been deprecated. This fork exists solely to address the "componentWillMount is going to be deprecated" warning.

I will happily merge back up to react-sticky if it is revived :)

$3

#### Update No longer actively maintained:

The 6.0.3 release is the last release maintained. This means we will not be considering any PR's and/or responding to any issues until a new maintainer is identified. It is highly recommended that you begin transitioning to another sticky library to ensure better support and sustainability. This is obviously less than ideal - sorry for any inconvenience!

#### Demos

* Basic
* Relative
* Stacked

#### Version 6.x Highlights

* Completely redesigned to support sticky behavior via higher-order component, giving you ultimate control of implementation details
* Features a minimal yet efficient API
* Drops support for versions of React < 15.3. If you are using an earlier version of React, continue to use the 5.x series

#### CSS
There's a CSS alternative to react-sticky: the position: sticky feature. However it currently does not have full browser support, specifically a lack of IE11 support and some bugs with table elements. Before using react-sticky, check to see if the browser support and restrictions prevent you from using position: sticky, as CSS will always be faster and more durable than a JS implementation.
``css
position: -webkit-sticky;
position: sticky;
top: 0;
`

Installation

`sh
npm install react-sticky
`

Overview & Basic Example

The goal of react-sticky is make it easier for developers to build UIs that have sticky elements. Some examples include a sticky navbar, or a two-column layout where the left side sticks while the right side scrolls.

react-sticky works by calculating the position of a component relative to a component. If it would be outside the viewport, the styles required to affix it to the top of the screen are passed as an argument to a render callback, a function passed as a child.

`js

{({ style }) =>

Sticky element

}

`

The majority of use cases will only need the style to pass to the DOM, but some other properties are passed for advanced use cases:

* style _(object)_ - modifiable style attributes to optionally be passed to the element returned by this function. For many uses, this will be the only attribute needed.
* isSticky _(boolean)_ - is the element sticky as a result of the current event?
* wasSticky _(boolean)_ - was the element sticky prior to the current event?
* distanceFromTop _(number)_ - number of pixels from the top of the Sticky to the nearest StickyContainer's top
* distanceFromBottom _(number)_ - number of pixels from the bottom of the Sticky to the nearest StickyContainer's bottom
* calculatedHeight _(number)_ - height of the element returned by this function

The Sticky's child function will be called when events occur in the parent StickyContainer,
and will serve as the callback to apply your own logic and customizations, with sane style attributes
to get you up and running quickly.

$3

Here's an example of all of those pieces together:

app.js

`js
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
// ...

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

{/* Other elements can be in between StickyContainer and Sticky,
but certain styles can break the positioning logic used. */}

{({
style,

// the following are also available but unused in this example
isSticky,
wasSticky,
distanceFromTop,
distanceFromBottom,
calculatedHeight
}) => (



{/ ... /}



)}

{/ ... /}

);
},
};
`

When the "stickiness" becomes activated, the arguments to the sticky function
are modified. Similarly, when deactivated, the arguments will update accordingly.

$3

supports all valid