useIntersectionObserver

Observe when an element enters or leaves the viewport.

https://www.shaktools.com/shak-hooks

Sensor

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useIntersectionObserver } from "@shak-hooks/usehooks";

Source: packages/react/src/useIntersectionObserver.ts

Signature

signature.ts

export function useIntersectionObserver(elementRef: RefObject<Element>, { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false, }: UseIntersectionObserverOptions = {}): IntersectionObserverEntry | undefined

Parameters

Name	Type	Optional	Default
elementRef	RefObject<Element>	No	-
{ threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false, }	UseIntersectionObserverOptions	Yes	{}

Returns

IntersectionObserverEntry | undefined

Exported Types

types.ts

1export interface UseIntersectionObserverOptions extends IntersectionObserverInit {

2 freezeOnceVisible?: boolean;

Implementation

use-intersection-observer.ts

1import { useEffect, useRef, useState } from "react";

3export function useIntersectionObserver(

4 elementRef: React.RefObject<Element>,

5 {

6 threshold = 0,

7 root = null,

8 rootMargin = "0%",

9 freezeOnceVisible = false,

10 }: IntersectionObserverInit & { freezeOnceVisible?: boolean }

11): IntersectionObserverEntry | undefined {

12 const [entry, setEntry] = useState<IntersectionObserverEntry>();

14 const frozen = entry?.isIntersecting && freezeOnceVisible;

16 const updateEntry = ([entry]: IntersectionObserverEntry[]) => {

17 setEntry(entry);

18 };

20 useEffect(() => {

21 const node = elementRef?.current;

22 const hasIOSupport = !!window.IntersectionObserver;

24 if (!hasIOSupport || frozen || !node) return;

26 const observerParams = { threshold, root, rootMargin };

27 const observer = new IntersectionObserver(updateEntry, observerParams);

29 observer.observe(node);

31 return () => observer.disconnect();

32 }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);

34 return entry;

35}

Google Ads

Usage

example.tsx

1import { useIntersectionObserver } from "@shak-hooks/usehooks";

3const result = useIntersectionObserver(null, undefined);

4// result: IntersectionObserverEntry | undefined

5// Use values directly (React state).