React Waypoint is a component designed to trigger functions whenever a specific element scrolls into or out of view within its container, including the window. It is currently at version 10.3.0 and is actively maintained, with regular minor and major releases addressing compatibility and performance. This library is commonly used for implementing features such as lazy loading, infinite scrolling, scrollspies, and elements that dock to the viewport. Its key differentiator is its straightforward React component API for handling scroll intersection events, abstracting away the complexities of `IntersectionObserver` or manual scroll event handling. It offers granular control over triggers with `onEnter`, `onLeave`, and `onPositionChange` callbacks, and supports both vertical and horizontal scrolling with configurable offsets.
npm install react-waypointVerified import paths — ran on the pinned version, not inferred.
This example demonstrates how to use `react-waypoint` to create a simple scroll spy, updating the current active section in the UI as the user scrolls.
Manually access `window` object or refactor logic to avoid direct reliance on this removed method. Most use cases do not require this explicit call.
Change `import Waypoint from 'react-waypoint';` to `import { Waypoint } from 'react-waypoint';`Update your `react` and `react-dom` peer dependencies to `^15.3.0` or higher, preferably to `^16.0.0 || ^17.0.0 || ^18.0.0` to ensure compatibility with modern React features.
Most modern bundlers (Webpack, Rollup, Parcel) should handle this automatically. If you experience issues, ensure your bundler is updated and configured correctly to resolve `module` or `exports` fields in `package.json`. Older, explicit imports like `import Waypoint from 'react-waypoint/es'` (from v7.3.1) are no longer the primary recommended path.
Use the `key` prop on the `Waypoint` component to force re-creation and re-evaluation when content changes or you need to re-trigger. For example, use `key={cursor}` in an infinite scroll scenario where `cursor` changes as more items load.Change your import statement from `import Waypoint from 'react-waypoint';` to `import { Waypoint } from 'react-waypoint';`Verify that `react-waypoint` and `react` are installed (`npm install react-waypoint react`) and that `Waypoint` is imported as a named export: `import { Waypoint } from 'react-waypoint';`. Check for duplicate `react` installations or incorrect bundler configurations.Ensure that if you pass children to `Waypoint`, there is only a single React element. For example, wrap multiple elements in a `<div>` or `<React.Fragment>` if you need to track a group of elements.