src/useInView.tsx

react-intersection-observer · packages/react-intersection-observer/src/useInView.tsx · typescript · MIT
ui

A React hook that tracks an element's visibility within the viewport to enable features like lazy loading or scroll-triggered animations.

// Source: https://github.com/thebuilder/react-intersection-observer | License: MIT | Copyright 2025 React Intersection Observer authors
// Provided via justclaw.it.com; keep this notice with the code.
import * as React from "react";
import type { IntersectionOptions, InViewHookResponse } from "./index";
import { useIntersectionObserverRef } from "./useIntersectionObserverRef";

const useIsomorphicLayoutEffect =
  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;

type State = {
  inView: boolean;
  entry?: IntersectionObserverEntry;
};

type RefState = {
  node: Element | null;
  reset: boolean;
};

/**
 * React Hooks make it easy to monitor the `inView` state of your components. Call
 * the `useInView` hook with the (optional) [options](#options) you need. It will


... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key