useIntersectionObserver
Track and manage the visibility of your DOM elements within the viewport with useIntersectionObserver.
Install:
npm i @uidotdev/usehooks
Description:
The useIntersectionObserver hook is useful because it provides a straightforward, built-in method for tracking the visibility and position of a DOM element in relation to the viewport. By leveraging the Intersection Observer API, it can greatly optimize performance and provide efficient, real-time updates for lazy-loading, infinite scrolling, or other visibility-dependent elements. With customizable thresholds and root margins, developers have fine-grained control over when the hook triggers, improving the user experience by dynamically loading content only when necessary.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| threshold | number | 1 | Either a single number or an array of numbers between 0 and 1, indicating at what percentage of the target’s visibility the observer’s callback should be executed. |
| root | element | null | The Element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null. |
| rootMargin | string | “0%” | Margin around the root. Can have values similar to the CSS margin property. The values can be percentages. This set of values serves to grow or shrink each side of the root element’s bounding box before computing intersections. Defaults to all zeros. |
Return Value
| Name | Type | Description |
|---|---|---|
| ref | React ref object | A React reference that can be attached to a DOM element to observe. |
| entry | object | An object containing information about the intersection. This object is similar to IntersectionObserverEntry. |
Demo:
Example:
import * as React from "react";
import { useIntersectionObserver } from "@uidotdev/usehooks";
import demoData from "./demoData";
const Section = ({ imgUrl, caption, href }) => {
const [ref, entry] = useIntersectionObserver({
threshold: 0,
root: null,
rootMargin: "0px",
});
return (
<section>
<figure ref={ref}>
{entry?.isIntersecting && (
<>
<img src={imgUrl} alt={caption} />
<figcaption>
<a href={href} alt={caption} target="_blank" rel="noreferrer">
{caption}
</a>
</figcaption>
</>
)}
</figure>
</section>
);
};
export default function App() {
return (
<main>
<header>
<h1>useIntersectionObserver</h1>
<h6>
(Memes from <a href="https://bytes.dev">bytes.dev</a>)
</h6>
</header>
{demoData.map(({ imgUrl, href, caption }, index) => {
return (
<Section key={index} imgUrl={imgUrl} href={href} caption={caption} />
);
})}
</main>
);
}More Hooks:
It’s dangerous to go alone! Master React by learning how to build useHooks yourself.
useDebounce
Delay the execution of function or state update with useDebounce.
useLocalStorage
Store, retrieve, and synchronize data from the browser’s localStorage API with useLocalStorage
useWindowSize
Track the dimensions of the browser window with useWindowSize.
usePrevious
Track the previous value of a variable with usePrevious.
useNetworkState
Monitor and adapt to network conditions seamlessly with useNetworkState.
useMediaQuery
Subscribe and respond to media query changes with useMediaQuery.
useOrientation
Manage and respond to changes in device orientation with useOrientation.
useSessionStorage
Store, retrieve, and synchronize data from the browser’s session storage with useSessionStorage.
usePreferredLanguage
Adapt to user language preferences dynamically with usePreferredLanguage.
useFetch
Fetch data with accurate states, caching, and no stale responses using useFetch.
useContinuousRetry
Automates retries of a callback function until it succeeds with useContinuousRetry
useVisibilityChange
Track document visibility and respond to changes with useVisibilityChange.
useScript
Load and manage external JavaScript scripts with useScript.
There’s no better way to learn useHooks than by building it yourself.
useRenderInfo
Debug renders and improve performance with useRenderInfo.
useRenderCount
Identify unnecessary re-renders and monitor update frequency with useRenderCount.
useRandomInterval
Execute a callback function at a random interval with useRandomInterval.
useIntervalWhen
Create dynamic timers that can be started, paused, or resumed with useIntervalWhen.
useInterval
Schedule periodic actions like data polling or animations with useInterval.
useLockBodyScroll
Temporarily disable scrolling on the document body with useLockBodyScroll.
useCountdown
Create countdown timers using useCountdown.
useIsClient
Determine whether the code is running on the client-side or server-side with useIsClient.
useQueue
Add, remove, and clear element from a queue data structure with useQueue.
useHover
Track whether an element is being hovered over with useHover.
useTimeout
Create delayed actions or timed events using useTimeout.
useEventListener
Listen for events on a target element with useEventListener.
Please give us your money.
useKeyPress
Detect and perform actions on key press events with useKeyPress.
useMap
Synchronize and update state based on the Map data structure with useMap.
useThrottle
Throttle computationally expensive operations with useThrottle.
useSet
Synchronize and update state based on the Set data structure with useSet.
useCopyToClipboard
Copy text to the clipboard using useCopyToClipboard.
useBattery
Track the battery status of a user’s device with useBattery.
useIdle
Detect user inactivity with useIdle.
useToggle
A hook to toggle a boolean value with useToggle.
useHistoryState
Add undo / redo functionality with useHistoryState.
useGeolocation
Access and monitor a user's geolocation (after they give permission) with useGeolocation.
usePageLeave
Track when a user navigates away from a webpage with usePageLeave.
useObjectState
Manage complex state objects with useObjectState.
The all new interactive way to master modern React (for fun and profit).
useLogger
Debug lifecycle events with useLogger.
useDocumentTitle
Dynamically update the title of a webpage with useDocumentTitle.
useIsFirstRender
Differentiate between the first and subsequent renders with useIsFirstRender.
useLongPress
Enable precise control of long-press interactions for both touch and mouse events with useLongPress.
useFavicon
Dynamically update the favicon with useFavicon.
useDefault
Manage state with default values using useDefault.
useWindowScroll
Track and manipulate the scroll position of a web page with useWindowScroll.
useMeasure
Effortlessly measure and track your component’s dimensions with useMeasure.
useClickAway
Detect clicks outside of specific component with useClickAway.
useList
Manage and manipulate lists with useList.
useCounter
Manage a counter value with minimum and maximum limits with useCounter.
useMouse
Track and retrieve the position of the mouse cursor with useMouse.