Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

April 27, 2021 12:06 am GMT

Infinite Scroll with React Hook & Intersection Observer

In this post, we going to use the useIntersectionObserver hook that I create in

Easy Lazy Loading with React & Intersection Observer API

AnxinYang Apr 18 3 min read

#react #typescript #hooks #javascript

In short, this hook will check if the target element is in the viewport of a document or window.

Ok, let's start with a component that will load a picture:

function Component({ id }: { id: number }) {  const [data, setData] = useState<any>({});  useEffect(() => {    fetch(`https://jsonplaceholder.typicode.com/photos/${id}`)      .then((res) => res.json())      .then((data) => {        setData(data);      });  }, []);  return (    <div style={{ height: "600px" }}>      <img src={data.url} alt="pic" />    </div>  );}

then, we can use it inside the App.js:

const pageSize=5;export default function App() {  const [count, setCount] = useState(0);  return (    <div className="App">      {(() => {        const children = [];        for (let i = 1; i <= count * pageSize; i++) {          children.push(<Component key={i} id={i} />);        }        return children;      })()}    </div>  );}

Now, we add the hook, a component that can be used as trigger, and an useEffect that can increase the counter:

const pageSize = 5;export default function App() {  const [count, setCount] = useState(0);  const ref = useRef(null);  const isBottomVisible = useIntersectionObserver(    ref,    {      threshold: 0 //trigger event as soon as the element is in the viewport.    },    false // don't remove the observer after intersected.  );  useEffect(() => {    //load next page when bottom is visible    isBottomVisible && setCount(count + 1);  }, [isBottomVisible]);  return (    <div className="App">      {(() => {        const children = [];        for (let i = 1; i <= count * pageSize; i++) {          children.push(<Component key={i} id={i} />);        }        return children;      })()}      <div ref={ref} style={{ width: "100%", height: "20px" }}>        Bottom      </div>    </div>  );}

Now we can test the code, here is a demo:

Thank you all!

Original Link: https://dev.to/anxinyang/infinite-scroll-with-react-hook-intersection-observer-img

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To