turash/bugulma/frontend/hooks/useIntersectionObserver.ts
Damir Mukimov 6347f42e20
Consolidate repositories: Remove nested frontend .git and merge into main repository
- Remove nested git repository from bugulma/frontend/.git
- Add all frontend files to main repository tracking
- Convert from separate frontend/backend repos to unified monorepo
- Preserve all frontend code and development history as tracked files
- Eliminate nested repository complexity for simpler development workflow

This creates a proper monorepo structure with frontend and backend
coexisting in the same repository for easier development and deployment.
2025-11-25 06:02:57 +01:00

36 lines
830 B
TypeScript

import { useEffect, useRef, useState } from 'react';
/**
* Hook for observing element intersection with viewport for lazy loading, infinite scroll, etc.
*/
export function useIntersectionObserver(
options: IntersectionObserverInit = {}
): [React.RefObject<Element>, boolean] {
const [isIntersecting, setIsIntersecting] = useState(false);
const ref = useRef<Element>(null);
useEffect(() => {
const element = ref.current;
if (!element) return;
const observer = new IntersectionObserver(
([entry]) => {
setIsIntersecting(entry.isIntersecting);
},
{
threshold: 0.1,
rootMargin: '50px',
...options,
}
);
observer.observe(element);
return () => {
observer.unobserve(element);
};
}, [options]);
return [ref, isIntersecting];
}