Shadcn Hooks

useInViewport

A hook to check if an element is in the viewport

Loading...

Installation

npx shadcn@latest add @shadcnhooks/use-in-viewport

API

/**
 * A hook to check if an element is in the viewport
 * @param target - The target to check if it is in the viewport
 * @param options - The options for the hook
 * @param options.rootMargin - The root margin for the intersection observer
 * @param options.threshold - The threshold for the intersection observer
 * @param options.root - The root element for the intersection observer
 * @param options.callback - The callback function to call when the target is in the viewport
 * @returns The boolean value indicating if the target is in the viewport and the ratio of the intersection
 */
export function useInViewport(
  target: BasicTarget | BasicTarget[],
  options?: Options,
): readonly [boolean | undefined, number | undefined]

Credits

Last updated on

On this page