How to Load when scrolled to bottom

Question

Hello im creating a movie app and everything is there except how do i put infinitescroll in my file? i want when scroll to bottom a new poster will appear.

import React, { useEffect, useState } from "react"; import MovieCard from '../Components/MovieCard' function Home() { const url = "http://api.themoviedb.org/3/movie/popular?api_key=328c283cd27bd1877d9080ccb1604c91&release_dates.lte=2016-12-31&sort_by=release_date.desc&page=1"; const [movies, setMovies] = useState({ data: [], loading: false, error: false }); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setMovies({ data: data.results, loading: false, error: false }) ); }, []); return ( <> {movies.data.map((movie) => ( <MovieCard movie={movie} /> ))} </> ) }; export default Home;

An already premade InfiniteScroll element might be more efficient to implement, try this one: npmjs.com/package/react-infinite-scroll-component — Incorrect syntax near
– Incorrect syntax near, Commented Jun 13, 2021 at 13:09

Daniel · Accepted Answer · 2021-06-13 13:39:43Z

This is very simple and you can do it without any external libraries

Add some element at the end of the page, for example empty div (or use any existing element)
Add react reference to that element
Add scroll event listener to the window, where you compare if user scrolled beyond that element.

This could look something like this:

 const refLastElement = useRef() const checkScrollEnd = useCallback(() => { if (window.pageYOffset + window.innerHeight >= refLastElement.current.offsetTop) { // add more elements } }, [/* something */]) useEffect(() => { window.addEventListener('scroll', checkScrollEnd) return () => window.removeEventListener('scroll', checkScrollEnd) }, [checkScrollEnd])

Collectives™ on Stack Overflow

How to Load when scrolled to bottom

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related