react-intersection-observer

Functions

• defaultFallbackInView()
• observe()
• useInView()
• useOnInView()

Classes

• InView

  • componentDidMount()
  • componentDidUpdate()
  • componentWillUnmount()
  • handleChange
  • handleNode
  • lastInView
  • node
  • observeNode()
  • render()
  • unobserve()

Interfaces

• IntersectionObserverProps

  • children
• IntersectionOptions

  • delay
  • fallbackInView
  • initialInView
  • onChange
  • root
  • rootMargin
  • skip
  • threshold
  • trackVisibility
  • triggerOnce

Type Aliases

• IntersectionChangeEffect
• IntersectionEffectOptions
• InViewHookResponse
• ObserverInstanceCallback
• PlainChildrenProps

function defaultFallbackInView

defaultFallbackInView: (inView: boolean | undefined) => void;

• What should be the default behavior if the IntersectionObserver is unsupported? Ideally the polyfill has been loaded, you can have the following happen: - undefined: Throw an error - true or false: Set the inView value to this regardless of intersection state *

function observe

observe: (
    element: Element,
    callback: ObserverInstanceCallback,
    options?: IntersectionObserverInit,
    fallbackInView?: boolean | undefined
) => () => void;

• Parameter element

  DOM Element to observe

  Parameter callback

  Callback function to trigger when intersection status changes

  Parameter options

  Intersection Observer options

  Parameter fallbackInView

  Fallback inView value. Function - Cleanup function that should be triggered to unregister the observer

function useInView

useInView: ({
    threshold,
    delay,
    trackVisibility,
    rootMargin,
    root,
    triggerOnce,
    skip,
    initialInView,
    fallbackInView,
    onChange,
}?: IntersectionOptions) => InViewHookResponse;

• React Hooks make it easy to monitor the inView state of your components. Call the useInView hook with the (optional) [options](#options) you need. It will return an array containing a ref, the inView status and the current [entry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry). Assign the ref to the DOM element you want to monitor, and the hook will report the status.

  Example 1

  import React from 'react';
  import { useInView } from 'react-intersection-observer';
  
  const Component = () => {
    const { ref, inView, entry } = useInView({
        threshold: 0,
    });
  
    return (
      <div ref={ref}>
        <h2>{`Header inside viewport ${inView}.`}</h2>
      </div>
    );
  };

function useOnInView

useOnInView: <TElement extends Element>(
    onIntersectionChange: IntersectionChangeEffect<TElement>,
    {
        threshold,
        root,
        rootMargin,
        trackVisibility,
        delay,
        triggerOnce,
        skip,
    }?: IntersectionEffectOptions
) => (element: TElement) => (() => void) | undefined;

• React Hooks make it easy to monitor when elements come into and leave view. Call the useOnInView hook with your callback and (optional) [options](#options). It will return a ref callback that you can assign to the DOM element you want to monitor. When the element enters or leaves the viewport, your callback will be triggered.

  This hook triggers no re-renders, and is useful for performance-critical use-cases or when you need to trigger render independent side effects like tracking or logging.

  Example 1

  import React from 'react';
  import { useOnInView } from 'react-intersection-observer';
  
  const Component = () => {
    const inViewRef = useOnInView((inView, entry) => {
      if (inView) {
        console.log("Element is in view", entry.target);
      } else {
        console.log("Element left view", entry.target);
      }
    });
  
    return (
      <div ref={inViewRef}>
        <h2>This element is being monitored</h2>
      </div>
    );
  };

type IntersectionChangeEffect

type IntersectionChangeEffect<TElement extends Element = Element> = (
    inView: boolean,
    entry: IntersectionObserverEntry & {
        target: TElement;
    }
) => void;

type IntersectionEffectOptions

type IntersectionEffectOptions = Omit<
    IntersectionOptions,
    'onChange' | 'fallbackInView' | 'initialInView'
>;

type InViewHookResponse

type InViewHookResponse = [
    (node?: Element | null) => void,
    boolean,
    IntersectionObserverEntry | undefined
] & {
    ref: (node?: Element | null) => void;
    inView: boolean;
    entry?: IntersectionObserverEntry;
};

• The Hook response supports both array and object destructing

type ObserverInstanceCallback

type ObserverInstanceCallback = (
    inView: boolean,
    entry: IntersectionObserverEntry
) => void;

type PlainChildrenProps

type PlainChildrenProps = IntersectionOptions & {
    children?: React.ReactNode;
    /**
     * Render the wrapping element as this element.
     * This needs to be an intrinsic element.
     * If you want to use a custom element, please use the useInView
     * hook to manage the ref explicitly.
     * @default `'div'`
     */
    as?: React.ElementType;
    /** Call this function whenever the in view state changes */
    onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void;
} & Omit<React.HTMLProps<HTMLElement>, 'onChange'>;

• Types specific to the PlainChildren rendering of InView