InView

Viewport에 노출될 때 props로 넘겨주는 action 콜백 함수를 호출하는 컴포넌트입니다.

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

스크롤 해주세요.

Box1

브라우저 개발자 도구의 콘솔을 확인해주세요.

action 콜백 함수가 최초 1회만 호출됩니다.

calledOnce: true

Box2

브라우저 개발자 도구의 콘솔을 확인해주세요.

action 콜백 함수가 여러 번 호출됩니다.

calledOnce: false