InViewTrigger

import { InViewTrigger } from '@frontend-toolkit-js/components';
 
<InViewTrigger onInView={() => console.log('화면에 보임!')}>
  <div>내용</div>
</InViewTrigger>;

function InfiniteScroll() {
  const [items, setItems] = useState([1, 2, 3]);
  const [loading, setLoading] = useState(false);
 
  const loadMore = () => {
    if (loading) return;
    setLoading(true);
 
    setTimeout(() => {
      setItems(prev => [...prev, prev.length + 1, prev.length + 2]);
      setLoading(false);
    }, 1000);
  };
 
  return (
    <div>
      {items.map(item => (
        <div key={item}>Item #{item}</div>
      ))}
 
      <InViewTrigger onInView={loadMore} threshold={0.1}>
        <div>{loading ? '로딩 중...' : '👇 더 보기'}</div>
      </InViewTrigger>
    </div>
  );
}

function LazyImage({ src }: { src: string }) {
  const [loaded, setLoaded] = useState(false);
 
  return (
    <InViewTrigger triggerOnce onInView={() => setLoaded(true)} threshold={0.3}>
      <div style={{ minHeight: 200 }}>
        {loaded ? <img src={src} alt="lazy" /> : <div>Loading...</div>}
      </div>
    </InViewTrigger>
  );
}

function FadeInOnScroll() {
  const [visible, setVisible] = useState(false);
 
  return (
    <InViewTrigger
      onInView={() => setVisible(true)}
      onOutView={() => setVisible(false)}
      threshold={0.5}
    >
      <div
        style={{
          opacity: visible ? 1 : 0,
          transform: visible ? 'translateY(0)' : 'translateY(20px)',
          transition: 'all 0.5s',
        }}
      >
        Fade In!
      </div>
    </InViewTrigger>
  );
}

function ArticleView({ articleId }: { articleId: string }) {
  const trackView = () => {
    analytics.track('article_view', { articleId });
  };
 
  return (
    <InViewTrigger
      triggerOnce
      debounce={1000}
      threshold={0.8}
      onInView={trackView}
    >
      <article>{content}</article>
    </InViewTrigger>
  );
}

interface InViewTriggerProps {
  onInView?: (entry?: IntersectionObserverEntry) => void;
  onOutView?: (entry?: IntersectionObserverEntry) => void;
  threshold?: number | number[];
  root?: Element | null;
  rootMargin?: string;
  triggerOnce?: boolean;
  disabled?: boolean;
  debounce?: number;
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
}

<InViewTrigger onInView={(entry) => {
  console.log('보임!', entry.intersectionRatio);
}}>

<InViewTrigger
  onInView={() => setVisible(true)}
  onOutView={() => setVisible(false)}
>

<InViewTrigger threshold={0.1} />   // 10% 보이면 실행
<InViewTrigger threshold={0.5} />   // 50% 보이면 실행
<InViewTrigger threshold={1.0} />   // 100% 보이면 실행

// 200px 전에 미리 로드
<InViewTrigger rootMargin="200px 0px" onInView={loadMore}>
  <LoadMoreButton />
</InViewTrigger>

// 이미지 로딩은 한 번만
<InViewTrigger triggerOnce onInView={loadImage}>
  <img />
</InViewTrigger>

// 빠른 스크롤 시 불필요한 호출 방지
<InViewTrigger debounce={300} onInView={track}>
  <Article />
</InViewTrigger>

<InViewTrigger disabled={!shouldTrack} onInView={track}>
  <Content />
</InViewTrigger>

// 한 번만 실행 (triggerOnce)
<InViewTrigger triggerOnce onInView={loadImage} />
 
// 디바운스 활용
<InViewTrigger debounce={300} onInView={track} />
 
// 적절한 threshold
<InViewTrigger threshold={0.1} onInView={loadMore} />  // 미리 로드

// 불필요한 매번 실행
<InViewTrigger onInView={loadImage} />  // triggerOnce 빠짐!
 
// 디바운스 없이 트래킹
<InViewTrigger onInView={track} />  // 빠른 스크롤 시 과도한 호출
 
// 너무 높은 threshold
<InViewTrigger threshold={1.0} onInView={loadMore} />  // 늦게 로드됨

// 내부 구현 (간략화)
const observer = new IntersectionObserver(
  entries => {
    if (entries[0].isIntersecting) {
      onInView(entries[0]);
    }
  },
  { threshold, rootMargin, root }
);
 
observer.observe(element);

// ❌ 높이가 0이면 감지 안 됨
<InViewTrigger onInView={...}>
  <div style={{ height: 0 }}>Content</div>
</InViewTrigger>
 
// ✅ 높이 지정
<InViewTrigger onInView={...}>
  <div style={{ minHeight: '100px' }}>Content</div>
</InViewTrigger>

<InViewTrigger debounce={300} onInView={...}>
  <div>Content</div>
</InViewTrigger>

const [disabled, setDisabled] = useState(false);
 
// 리셋
setDisabled(true);
setTimeout(() => setDisabled(false), 0);

<InViewTrigger
  onInView={entry => {
    entry?.intersectionRatio;
    //      ^? number
  }}
  threshold={0.5}
  //        ^? number | number[]
>
  <div>Content</div>
</InViewTrigger>