useIntersectionObserver

import { useIntersectionObserver } from '@kivora/react';

function LazyImage({ src }: { src: string }) {
  const { ref, isIntersecting } = useIntersectionObserver({ once: true });

  return (
    <div ref={ref}>
      {isIntersecting ? (
        <img src={src} alt="Lazy loaded" />
      ) : (
        <div className="placeholder">Loading...</div>
      )}
    </div>
  );
}

import { useIntersectionObserver } from '@kivora/react';

function FadeIn({ children }: { children: React.ReactNode }) {
  const { ref, isIntersecting } = useIntersectionObserver({
    once: true,
    threshold: 0.5,
  });

  return (
    <div
      ref={ref}
      style={{
        opacity: isIntersecting ? 1 : 0,
        transform: isIntersecting ? 'translateY(0)' : 'translateY(20px)',
        transition: 'opacity 0.5s, transform 0.5s',
      }}
    >
      {children}
    </div>
  );
}

import { useIntersectionObserver } from '@kivora/react';
import { useEffect } from 'react';

function InfiniteList({ items, loadMore }: { items: any[]; loadMore: () => void }) {
  const { ref, isIntersecting } = useIntersectionObserver({
    rootMargin: '100px',
  });

  useEffect(() => {
    if (isIntersecting) {
      loadMore();
    }
  }, [isIntersecting, loadMore]);

  return (
    <div>
      {items.map((item, i) => (
        <div key={i}>{item}</div>
      ))}
      <div ref={ref}>Loading more...</div>
    </div>
  );
}

import { useIntersectionObserver } from '@kivora/react';

function VisibilityTracker() {
  const { ref, entry } = useIntersectionObserver({
    threshold: [0, 0.25, 0.5, 0.75, 1],
  });

  const visibilityPercentage = entry
    ? Math.round(entry.intersectionRatio * 100)
    : 0;

  return (
    <div ref={ref} style={{ height: '200px', background: '#f0f0f0' }}>
      Visible: {visibilityPercentage}%
    </div>
  );
}

import { useIntersectionObserver } from '@kivora/react';

function LazyComponent() {
  const { ref, isIntersecting } = useIntersectionObserver({
    once: true,
    rootMargin: '200px',
  });

  return (
    <div ref={ref} style={{ minHeight: '400px' }}>
      {isIntersecting ? (
        <ExpensiveComponent />
      ) : (
        <div className="skeleton-loader" />
      )}
    </div>
  );
}