import { useRef, useEffect } 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;
}, [props]);
return (
<div ref={ref} {...props}>
{children}
</div>
);
};