@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
28 lines • 1.19 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useCallback, useRef, useState } from 'react';
/**
* A hook that uses an Intersection Observer on the target element ref
* and detects if the element is intersecting with its parent.
*/
export function useIntersectionObserver({ initialState = false, } = {}) {
const observerRef = useRef(null);
const [isIntersecting, setIsIntersecting] = useState(initialState);
const ref = useCallback(targetElement => {
if (typeof IntersectionObserver === 'undefined') {
// Do nothing in environments like JSDOM
return;
}
if (observerRef.current) {
// Dismiss previous observer because the target changed
observerRef.current.disconnect();
}
// Create a new observer with the target element
if (targetElement) {
observerRef.current = new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting));
observerRef.current.observe(targetElement);
}
}, []);
return { ref, isIntersecting };
}
//# sourceMappingURL=index.js.map