useIsVisible

The useIsVisible hook returns an object that provides information about the visibility of a component. More Info...

This hook can be used for lazy loading images, run expensive animations on hidden components or tracking visibility of user content. It integrates the Intersection Observer API in the background.

import { useIsVisible } from '@archibald/client';

const RETURN_VALUE = useIsVisible(PARAMETERS);

Parameters

Name	Type	Optional	Description
passedOptions	CustomIntersectionObserverInit	✔️	An object holding configuration that will be used in the hook.

passedOptions

CustomIntersectionObserverInit

Interface CustomIntersectionObserverInit extends IntersectionObserverInit object and adds additional properties.

Property	Type	Description	Default
root	Element|Document	Ancestor of the target element which is used to check target visibility.	null
element	HTMLElement	A custom target for the hook to track.	device viewport
rootMargin	string	Root element's marginal bounding box necessary to compute intersections.	100px 0px 0px 0px
threshold	number|number[]	% of the target's visibility before isVisible becomes true. Range 0.0 - 1.0	0
multiple	boolean	When false, stop observing target element as soon as isVisible is true.	false
defaultValue	boolean	Default value of isVisible on first render.	false

Return value

HookResults

Property	Type	Description
isVisible	boolean	true when DOM element is visible. Defaults to passed defaultValue.
setRef	function|null	Callback passed to ref attribute of the HTML element that needs to be observed. null if element was provided
ref	MutableRefObject<ObservedHTMLElement>	Reference object of the targeted HTML element which can be accessed in useEffect.