norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
30 lines • 1.27 kB
JavaScript
import { useState, useEffect } from 'react';
/**
* Hook that detects when an element is partially visible in the viewport
* @param elementRef - Reference to the DOM element to observe
* @returns boolean indicating if the element is partially visible in the viewport
*/
export var usePartiallyVisible = function (elementRef) {
var _a = useState(false), isPartiallyVisible = _a[0], setIsPartiallyVisible = _a[1];
useEffect(function () {
var element = elementRef.current;
if (!element)
return;
var observer = new IntersectionObserver(function (_a) {
var entry = _a[0];
// Element is partially visible if it's intersecting but not completely visible
var isPartial = entry.isIntersecting && entry.intersectionRatio < 1.0;
setIsPartiallyVisible(isPartial);
}, {
root: null, // Use the viewport as the root
threshold: [0, 1.0], // Check at these thresholds to determine partial visibility
});
observer.observe(element);
return function () {
if (element)
observer.unobserve(element);
};
}, [elementRef]);
return isPartiallyVisible;
};
//# sourceMappingURL=useOutsideScreen.js.map