{"id":15223,"library":"react-waypoint","title":"React Waypoint Component","description":"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.","status":"active","version":"10.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/civiccc/react-waypoint","tags":["javascript","react","component","react-component","scroll","onscroll","scrollspy","typescript"],"install":[{"cmd":"npm install react-waypoint","lang":"bash","label":"npm"},{"cmd":"yarn add react-waypoint","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-waypoint","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the React component to function.","package":"react","optional":false}],"imports":[{"note":"Since v9.0.0, `Waypoint` is a named export. Previous versions (pre-v9) used a default export, leading to 'Waypoint is not a function' errors if imported incorrectly.","wrong":"import Waypoint from 'react-waypoint';","symbol":"Waypoint","correct":"import { Waypoint } from 'react-waypoint';"},{"note":"TypeScript types are included. Use `import type` for type-only imports in modern TypeScript.","symbol":"Waypoint (type)","correct":"import type { Waypoint } from 'react-waypoint';"},{"note":"Constants like `POSITION_BELOW`, `POSITION_INSIDE`, `POSITION_ABOVE` are named exports, useful for `onPositionChange` callbacks.","symbol":"POSITION_BELOW","correct":"import { POSITION_BELOW } from 'react-waypoint';"}],"quickstart":{"code":"import React, { useState, useCallback } from 'react';\nimport { Waypoint } from 'react-waypoint';\n\nconst ScrollSpyExample = () => {\n const [currentSection, setCurrentSection] = useState('section1');\n\n const handleEnter = useCallback((sectionName) => {\n setCurrentSection(sectionName);\n console.log(`Entered ${sectionName}`);\n }, []);\n\n return (\n
\n );\n};\n\nexport default ScrollSpyExample;","lang":"typescript","description":"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."},"warnings":[{"fix":"Manually access `window` object or refactor logic to avoid direct reliance on this removed method. Most use cases do not require this explicit call.","message":"The `Waypoint.getWindow()` static method was removed.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Change `import Waypoint from 'react-waypoint';` to `import { Waypoint } from 'react-waypoint';`","message":"The `Waypoint` component is no longer a default export; it is now a named export. This means the import statement must change.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"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.","message":"React version 15.3.0 or higher is now required. This might break applications running older React versions.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"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.","message":"Changes in the ES module entry point might affect bundlers or environments that were relying on specific `package.json` exports.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"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.","message":"Waypoint callbacks (`onEnter`, `onLeave`) only fire if the new position changed from the last known position. For infinite scroll, if the component re-renders but stays visible, it might not re-trigger.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import Waypoint from 'react-waypoint';` to `import { Waypoint } from 'react-waypoint';`","cause":"Attempting to import `Waypoint` as a default export when it has been a named export since v9.0.0.","error":"TypeError: (0 , react_waypoint__WEBPACK_IMPORTED_MODULE_0__.default) is not a function"},{"fix":"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.","cause":"This error can occur if `react-waypoint` itself or its peer dependency `react` is not correctly imported or installed, or if the `Waypoint` component is not being used as a valid React component.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."},{"fix":"Ensure that if you pass children to `Waypoint`, there is only a single React element. For example, wrap multiple elements in a `
` or `` if you need to track a group of elements.","cause":"The `Waypoint` component was rendered with multiple children or an invalid child type.","error":"Failed prop type: Invalid prop `children` supplied to `Waypoint`. Expected a single React element."}],"ecosystem":"npm"}