react-intersection-observer(라이브러리.무한스크롤)

https://github.com/thebuilder/react-intersection-observer

GitHub - thebuilder/react-intersection-observer: React implementation of the Intersection Observer API to tell you when an eleme

 

특정 요소가 사용자의 viewport(화면) 내에 들어오는지 감지

Intersection Observer API를 기반으로 React에서 사용하기 간편하게 만들어진 라이브러리

 

npm install react-intersection-observer
yarn add react-intersection-observer

 import { useInView } from "react-intersection-observer";

const { ref, inView, entry } = useInView({

    // Optional options 
    
    //threshold 형태 : 배열 or 0~1
	threshold: 0
    //threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
    //threshold: 1
})

  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  );

 

옵션 : useInView 함수에 객체 형태로 전달

 

threshold

- type : number or number[]

- default : 0

트리거하기 전에 보여야 하는 백분율을 나타내는 0와 사이의 숫자 . 또한 여러 트리거 포인트를 만들기 위해 숫자 배열일 수 있습니다.

 

onChange

- type : (inView, entry) => void

- default : undefined

in View 상태가 변경될 때마다 이 함수를 호출합니다. 현재 IntersectionObserverEntry와 함께 inView boolean 값을 받습니다.

 

trackVisibility 

- type : boolean 

- default : false

이 교차 관찰자가 대상의 가시성 변화를 추적할지 여부를 나타내는 boolean 값입니다.

 

delay

- type : number

- default  : undefined

주어진 대상에 대한 이 관찰자의 알림 사이의 최소 지연 시간을 밀리초 단위로 나타내는 숫자입니다.

trackVisibility가 true일 경우 이 값은 최소한 100으로 설정되어야합니다

 

skip

- type : boolean

- default  : false

IntersectionObserver 생성을 건너뜁니다.

필요에 따라 이를 사용하여 observer를 활성화 및 비활성화할 수 있습니다. 

skipwhile 로 설정된 경우 inView현재 상태가 계속 유지됩니다.

 

triggerOnce

- type : boolean

- default  : false

observer의 트리거가 한번만 실행되도록 합니다

 

initialInView

- type : boolean

- default  : false

inView boolean 초기 값을 설정합니다 .

뷰포트를 떠날 때 무언가를 트리거하려는 경우에 사용할 수 있습니다.

 

fallbackInView

- type : boolean

- default  : undefined

IntersectionObserver클라이언트에서 API를 사용할 수 없는 경우 기본 동작은 오류를 throw하는 것입니다. 특정 폴백 동작을 설정할 수 있으며 inView값은 실패하는 대신 이 값으로 설정됩니다. 전역 기본값을 설정하려면 다음을 사용하여 설정할 수 있습니다.defaultFallbackInView()

 

 

 

 

 

 

하나의 컴포넌트에 여러개의 참조 할당

 

import React, { useRef, useCallback } from "react";
import { useInView } from "react-intersection-observer";

function Component(props) {
  const ref = useRef();
  const { ref: inViewRef, inView } = useInView();

  // Use `useCallback` so we don't recreate the function on each render
  const setRefs = useCallback(
    (node) => {
      // Ref's from useRef needs to have the node assigned to `current`
      ref.current = node;
      // Callback refs, like the one from `useInView`, is a function that takes the node as an argument
      inViewRef(node);
    },
    [inViewRef],
  );

  return <div ref={setRefs}>Shared ref is visible: {inView}</div>;
}