Skip to main content

InView

A component that calls an action callback function that is passed as a prop when exposed to a Viewport.


Interface​

type InViewProps = React.ComponentProps<'div'> & UseIntersectionObserverProps;

const InView: React.ForwardRefExoticComponent<
  Omit<React.PropsWithChildren<InViewProps>, 'ref'> &
    React.RefAttributes<HTMLDivElement>
>;

Usage​

import { InView } from '@devgrace/react';

const Example = () => {
  const onAction = () => {
    /* action */
  }

  return (
    <div>
      {/* ... */}
      <InView action={onAction} calledOnce>Box1</InView>
    </div>
  );
};

Example​

Please scroll down.

Box1

Check the console in your browser's developer tools.

The action callback function is called only the first time.

calledOnce: true

Box2

Check the console in your browser's developer tools.

The action callback function is called multiple times.

calledOnce: false