useInViewport

Observe whether the element is in the visible area, and the visible area ratio of the element. More information refer to [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

Overview

Observe whether the element is in the visible area, and the visible area ratio of the element. More information refer to Intersection Observer API.

Documentation and Examples

Installation

Open in

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useInViewport.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useInViewport.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useInViewport.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useInViewport.json

Observe whether the element is in the visible area, and the visible area ratio of the element. More information refer to Intersection Observer API.

type Target = Element | (() => Element) | React.MutableRefObject<Element>;

const [inViewport, ratio] = useInViewport(
  target: Target | Target[],
  options?: Options
);

Params

Property	Description	Type	Default
inViewport	Is visible	`boolean` \| `undefined`
ratio	Current visible ratio, updated every time the node set by `options.threshold` is reached	`number` \| `undefined`

useInViewport

Overview

Installation

Examples

Default usage

Observe the visible area ratio of element

Listening content scrolling selection menu

API

Params

On this page