Random unused IntersectionView
Keeping this for future use
This commit is contained in:
parent
2d23b15c8d
commit
379ef7cc11
29
src/components/intersection-view.jsx
Normal file
29
src/components/intersection-view.jsx
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
import { useLayoutEffect, useRef, useState } from 'preact/hooks';
|
||||||
|
|
||||||
|
const IntersectionView = ({ children, root = null, fallback = null }) => {
|
||||||
|
const ref = useRef();
|
||||||
|
const [show, setShow] = useState(false);
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
const entry = entries[0];
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
setShow(true);
|
||||||
|
observer.unobserve(ref.current);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root,
|
||||||
|
rootMargin: `${screen.height}px`,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (ref.current) observer.observe(ref.current);
|
||||||
|
return () => {
|
||||||
|
if (ref.current) observer.unobserve(ref.current);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return show ? children : <div ref={ref}>{fallback}</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IntersectionView;
|
Loading…
Reference in a new issue