Custom hook designed to detect if an element is visible within the viewport.
To install the useElementDetector
hook from npm, use the following command:
npm i use-detector-hook
import { useState, useEffect, useRef } from "react";
import { useElementDetector } from "use-detector-hook";
// Example component
const MyComponent = () => {
const elementRef = useRef(null);
/*
ELEMENT REF: REQUIRED
OPTIONS: OPTIONAL
CALLBACKS: OPTIONAL
*/
const isVisible = useElementDetector(
elementRef,
{ threshold: 0.5 },
{
onTriggerEnter: () => console.log("ON TRIGGER ENTER"),
onTriggerExit: () => console.log("ON TRIGGER EXIT"),
onChangeVisibility: (visibility) =>
console.log(`ON CHANGE ${visibility}`),
onFirstVisible: () => console.log("FIRST TIME ON VIEWPORT"),
}
);
return (
<div ref={elementRef}>
{isVisible ? "Element is visible!" : "Element is not visible!"}
</div>
);
};
ref
: Reference to the element being observed.options
(optional): Options for configuring the IntersectionObserver.threshold
(optional): Threshold for intersection ratio.
callbacks
(optional): Callbacks for visibility changes.onChangeVisibility
(optional): Callback triggered when visibility changes.onTriggerEnter
(optional): Callback triggered when the element enters the viewport.onTriggerExit
(optional): Callback triggered when the element exits the viewport.onFirstVisible
(optional): Callback triggered when the element enters the viewport for the first time.