A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the window.
React Waypoint can be used to build features like lazy loading content, infinite scroll, or docking elements to the viewport on scroll.
Inspired by Waypoints, except this little library grooves the React way.
npm install react-waypoint --save
var Waypoint = require('react-waypoint');
<Waypoint
onEnter={this._handleWaypointEnter}
onLeave={this._handleWaypointLeave}
threshold={0.2}
/>
A waypoint normally fires onEnter
and onLeave
as you are scrolling, but it
can fire because of other events too:
- When the window is resized
- When it is mounted (fires
onEnter
if it's visible on the page) - When it is updated/re-rendered by its parent
Callbacks will only fire if the new position changed from the last known
position. Sometimes it's useful to have a waypoint that fires onEnter
every
time it is updated as long as it stays visible (e.g. for infinite scroll). You
can then use a key
prop to control when a waypoint is reused vs. re-created.
<Waypoint
key={cursor}
onEnter={this._loadMoreContent}
/>
Example: JSFiddle Example
propTypes: {
/**
* Function called when waypoint enters viewport
* Both parameters will be null if the waypoint is in the
* viewport on initial mount.
*
* @param {Event|null} event
* @param {Waypoint.above|Waypoint.below|null} from
*/
onEnter: PropTypes.func,
/**
* Function called when waypoint leaves viewport
*
* @param {Event|null} event
* @param {Waypoint.above|Waypoint.below} to
*/
onLeave: PropTypes.func,
/**
* Threshold - a percentage of the height of the visible
* part of the scrollable parent (e.g. 0.1)
*/
threshold: PropTypes.number
},
In this component we make a few assumptions that we believe are generally safe, but in some situations might present limitations.
- We determine the scrollable-ness of a node by inspecting its computed overflow-y or overflow property and nothing else. This could mean that a container with this style but that does not actually currently scroll will be considered when performing visibility calculations.
- We assume that waypoint is rendered within at most one scrollable container. If you render a waypoint in multiple nested scrollable containers, the visibility calculations will likely not be accurate.
- We also base the visibility calculations on the scroll position of the
scrollable container (or
window
if no scrollable container is found). This means that if your scrollable container has a height that is greater than the window, it might triggeronEnter
unexpectedly.
Credit to trotzig and lencioni for writing this component, and the Brigade team for open sourcing it.
Thanks to the creator of the original Waypoints library, imakewebthings.