Moduletrace/tailwind-ui-library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Benjamin Toby 2026-03-10 05:13:00 +01:00
parent 9f8527fc4d
commit 2c101420cc
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/hooks/useIntersectionObserver.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useRef } from "react";
type Param = { type Param = {
elementRef?: React.RefObject<Element | undefined>; elementRef?: React.RefObject<Element | undefined>;
@ -9,8 +9,6 @@ type Param = {
delay?: number; delay?: number;
}; };
let timeout: any;
export default function useIntersectionObserver({ export default function useIntersectionObserver({
elementRef, elementRef,
className, className,
@ -19,6 +17,8 @@ export default function useIntersectionObserver({
delay, delay,
elId, elId,
}: Param) { }: Param) {
let timeoutRef = useRef<any>(null);
const [isIntersecting, setIsIntersecting] = React.useState(false); const [isIntersecting, setIsIntersecting] = React.useState(false);
const [refresh, setRefresh] = React.useState(0); const [refresh, setRefresh] = React.useState(0);
@ -27,10 +27,10 @@ export default function useIntersectionObserver({
const observerCallback: IntersectionObserverCallback = React.useCallback( const observerCallback: IntersectionObserverCallback = React.useCallback(
(entries, observer) => { (entries, observer) => {
const entry = entries[0]; const entry = entries[0];
window.clearTimeout(timeout); window.clearTimeout(timeoutRef.current);
if (entry.isIntersecting) { if (entry.isIntersecting) {
timeout = setTimeout(() => { timeoutRef.current = setTimeout(() => {
setIsIntersecting(true); setIsIntersecting(true);
if (removeIntersected) { if (removeIntersected) {
@ -41,7 +41,7 @@ export default function useIntersectionObserver({
setIsIntersecting(false); setIsIntersecting(false);
} }
}, },
[] [],
); );
React.useEffect(() => { React.useEffect(() => {