Skip to main content
Version: next

useInView

useInView returns whether an element is currently in the viewport, via the native IntersectionObserver API: the programmatic building block behind scroll-reveal effects, lazy loading, and view-based analytics.

Signature​

function useInView(
  ref: RefObject<HTMLElement>,
  options?: {
    threshold?: number | number[];
    root?: Element | null;
    rootMargin?: string;
    once?: boolean;
  }
): boolean;

threshold defaults to 0.

tip

For style-only scroll reveals, prefer the declarative view prop. Use useInView when you need the boolean for logic (lazy load, analytics, branching).

Usage​

import { useRef } from 'react';
import { useInView, useValue, withSpring, animate } from 'react-ui-animate';

function RevealOnScroll() {
  const ref = useRef(null);
  const isInView = useInView(ref, { threshold: 0.3, once: true });
  const [opacity, setOpacity] = useValue(0);

  useEffect(() => {
    if (isInView) setOpacity(withSpring(1));
  }, [isInView]);

  return <animate.div ref={ref} style={{ opacity }} />;
}
Preview

vs. the view prop​

useInView is the hook to reach for when you need the boolean itself (for non-style side effects like lazy-loading or analytics) or multiple thresholds; for a purely declarative "animate this element in/out as it scrolls," the view prop needs no useEffect at all.

Next steps​