react-intersection-observer

Functions

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

Classes

• InView

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

Interfaces

• IntersectionObserverProps

  • children
• IntersectionOptions

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

Type Aliases

• 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>
    );
  };

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