import { useEffect, useRef, useState, useContext } from "react";
import ScrollContext from "../contexto/scrollContext";
const Observer = () => {
const [postsPerPage, setPostsPerPage] = useState(1);
const observedRef = useRef(null);
const [numPosts, setNumPosts ] = useContext(ScrollContext);
const postsPerCharge = 3;
useEffect(() => {
const iObserv = new IntersectionObserver(([entry]) => {
const ratio = entry.intersectionRatio;
if(ratio > 0) {
setNumPosts((value) => value +3);
console.log("rodando", numPosts)
/* setNum((prevNum) => prevNum + 1); */
}
});
if (observedRef.current){
iObserv.observe(observedRef.current);
}
return () => {iObserv.disconnect();}
},[]);
return(
<>
<h1 ref={observedRef} id="sentinela" style={{backgroundColor:"pink"}}>Pinto</h1>
</>
);
}
export default Observer;
Adicione um comentário
|