import { useEffect, useRef } from 'react'; export const ScrollIntoViewOnce = ({ children, ...props }) => { const ref = useRef(null); const once = useRef(false); useEffect(() => { if (!ref.current || once.current) return; const c = ref.current; // only scroll if 50% isnt visible const rect = c.getBoundingClientRect(); const windowHeight = window.innerHeight || document.documentElement.clientHeight; const elementHeight = rect.height; const visibleTop = Math.max(rect.top, 0); const visibleBottom = Math.min(rect.bottom, windowHeight); const visibleHeight = Math.max(0, visibleBottom - visibleTop); const visibleRatio = visibleHeight / elementHeight; if (visibleRatio >= 0.5) return; c.scrollIntoView({ behavior: 'smooth', block: 'end' }); once.current = true; }, []); return (
{children}
); };