React Waypoint Component

Common errors

• TypeError: (0 , react_waypoint__WEBPACK_IMPORTED_MODULE_0__.default) is not a function

  cause Attempting to import `Waypoint` as a default export when it has been a named export since v9.0.0.
  fix Change your import statement from `import Waypoint from 'react-waypoint';` to `import { Waypoint } from 'react-waypoint';`

• 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.

  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.
  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.

• Failed prop type: Invalid prop `children` supplied to `Waypoint`. Expected a single React element.

  cause The `Waypoint` component was rendered with multiple children or an invalid child type.
  fix 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.

Warnings

• breaking The `Waypoint.getWindow()` static method was removed.
  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.
• breaking The `Waypoint` component is no longer a default export; it is now a named export. This means the import statement must change.
  Fix: Change `import Waypoint from 'react-waypoint';` to `import { Waypoint } from 'react-waypoint';`
• breaking React version 15.3.0 or higher is now required. This might break applications running older React versions.
  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.
• breaking Changes in the ES module entry point might affect bundlers or environments that were relying on specific `package.json` exports.
  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.
• gotcha 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.
  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.

Install

• npm install react-waypoint npm
• yarn add react-waypoint yarn
• pnpm add react-waypoint pnpm

Imports

• Waypoint
  wrong:

  import Waypoint from 'react-waypoint';

  correct:

  import { Waypoint } from 'react-waypoint';

  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.
• Waypoint (type)

  import type { Waypoint } from 'react-waypoint';

  TypeScript types are included. Use `import type` for type-only imports in modern TypeScript.
• POSITION_BELOW

  import { POSITION_BELOW } from 'react-waypoint';

  Constants like `POSITION_BELOW`, `POSITION_INSIDE`, `POSITION_ABOVE` are named exports, useful for `onPositionChange` callbacks.

Quickstart

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.

import React, { useState, useCallback } from 'react';
import { Waypoint } from 'react-waypoint';

const ScrollSpyExample = () => {
  const [currentSection, setCurrentSection] = useState('section1');

  const handleEnter = useCallback((sectionName) => {
    setCurrentSection(sectionName);
    console.log(`Entered ${sectionName}`);
  }, []);

  return (
    <div style={{ height: '300px', overflowY: 'scroll', border: '1px solid gray' }}>
      <p>Scroll down to see Waypoint in action!</p>
      <div style={{ height: '400px', background: '#e0ffe0', padding: '20px' }}>
        <h2>Section 1 (Current: {currentSection === 'section1' ? '✅' : '❌'})</h2>
        <p>This is the content for section 1.</p>
      </div>
      <Waypoint
        onEnter={() => handleEnter('section1')}
        bottomOffset="-100px"
      />

      <div style={{ height: '400px', background: '#ffe0ff', padding: '20px' }}>
        <h2>Section 2 (Current: {currentSection === 'section2' ? '✅' : '❌'})</h2>
        <p>More content for section 2.</p>
      </div>
      <Waypoint
        onEnter={() => handleEnter('section2')}
        bottomOffset="-100px"
      />

      <div style={{ height: '400px', background: '#e0e0ff', padding: '20px' }}>
        <h2>Section 3 (Current: {currentSection === 'section3' ? '✅' : '❌'})</h2>
        <p>Final section content.</p>
      </div>
      <Waypoint
        onEnter={() => handleEnter('section3')}
        bottomOffset="-100px"
      />
    </div>
  );
};

export default ScrollSpyExample;