UseIntersectionObserver()

반환한 targetRef를 사용하여 대상 컴포넌트에 intersectionObserver 이벤틀르 주기 위한 hooks입니다.

hooks 선언시 props 설정이 가능하며, 화면에 표출되는 조건에 따라 onVisible, onHidden 함수가 실행됩니다.

Signature

useIntersectionObserver: ({
  onVisible,
  onHidden,
  options
}: UseIntersectionObserverParams, deps: unknown[]) => {
  targetRef: react.RefObject<HTMLElement>;
}

Parameters

Parameter	Type	Description
{ onVisible, onHidden, options}	UseIntersectionObserverParams
deps	unknown[]

Returns

{ targetRef: react.RefObject<HTMLElement>; }

intersection Observer 이벤트가 할당된 Element useRef

Example

const { targetRef } = useIntersectionObserver(
  {
    onVisible: () => onVisibleLast(),
    onHidden: () => onHiddenLast(),
    options: {
      threshold: 0.1,
    },
  },
  [],
);
...

return (
 <LastItem ref={targetRef} w="100%" />
)