hooks/useintersection

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useIntersection hook overview

The useIntersection hook returns information about the intersection of a given element with its scroll container or body element using the Intersection Observer API. It accepts IntersectionObserver's options as its only optional argument.

useIntersection hook API parameters

The useIntersection hook accepts an optional IntersectionObserverInit object with the following properties: root (a container element to compare intersection against), rootMargin (a string of margins around the root element), and threshold (a number or array of numbers between 0 and 1 indicating when the callback should fire).

useIntersection return value

The useIntersection hook returns an object with two properties: ref (a React RefCallback that should be passed to the observed element) and entry (the latest IntersectionObserverEntry returned by the IntersectionObserver's callback, or null on first render, during SSR, or when no element is being observed).

useIntersection TypeScript definition

The useIntersection function signature is: function useIntersection<T extends HTMLElement = any>(options?: IntersectionObserverInit): UseIntersectionReturnValue<T>. The UseIntersectionReturnValue interface has properties: ref (React.RefCallback<T | null>) and entry (IntersectionObserverEntry | null).

useIntersection with HTML and Mantine components

The useIntersection hook can be used with both regular HTML elements and Mantine components by passing the ref to either a regular div element or a Mantine component like Paper using the ref prop.

useIntersection basic usage example

Example showing basic useIntersection usage: import { Paper } from '@mantine/core'; import { useIntersection } from '@mantine/hooks'; function Demo() { const { ref } = useIntersection(); return ( <> {/* With regular element: */} <div ref={ref} /> {/* With Mantine component: */} <Paper ref={ref} /> </> ); } This demonstrates how to attach the ref from useIntersection to both a regular HTML element and a Mantine component.

useIntersection with IntersectionObserver options example

Example showing useIntersection with IntersectionObserver options: import { useIntersection } from '@mantine/hooks'; useIntersection({ root: document.querySelector('#some-element'), rootMargin: '0rem', threshold: 1.0, }); This demonstrates passing IntersectionObserver configuration options to the useIntersection hook.

UseIntersectionReturnValue type export

The UseIntersectionReturnValue type is exported from the @mantine/hooks package and can be imported as: import type { UseIntersectionReturnValue } from '@mantine/hooks';

Give your agent this brain