mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-01-22 16:46:28 +01:00
Random unused IntersectionView
Keeping this for future use
This commit is contained in:
parent
2d23b15c8d
commit
379ef7cc11
1 changed files with 29 additions and 0 deletions
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