45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
|
|
type Props = {
|
|
children: any,
|
|
};
|
|
|
|
export default function WaitUntilOnPage(props: Props) {
|
|
const ref = React.useRef();
|
|
const [shouldRender, setShouldRender] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
function handleDisplayingRef() {
|
|
const element = ref && ref.current;
|
|
if (element) {
|
|
const bounding = element.getBoundingClientRect();
|
|
if (
|
|
bounding.top >= 0 &&
|
|
bounding.left >= 0 &&
|
|
// $FlowFixMe
|
|
bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
|
|
// $FlowFixMe
|
|
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
|
|
) {
|
|
setShouldRender(true);
|
|
}
|
|
}
|
|
|
|
if (element && !shouldRender) {
|
|
window.addEventListener('scroll', handleDisplayingRef);
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', handleDisplayingRef);
|
|
};
|
|
}
|
|
}
|
|
|
|
if (ref) {
|
|
handleDisplayingRef();
|
|
}
|
|
}, [ref, setShouldRender, shouldRender]);
|
|
|
|
return <div ref={ref}>{shouldRender && props.children}</div>;
|
|
}
|