Infinite scroll in React con react-infinite-scroll-component

react-infinite-scroll-component è (una) delle librerie per React per creare uno scroll infinito.

In questo articolo vediamo come usarlo.

Ovviamente non ho speso molto tempo per l'aspetto grafico....

Per installarla possiamo usare npm:

 npm install react-infinite-scroll-component

Qui sotto il codice:

import {useEffect, useState} from "react";
import InfiniteScroll from "react-infinite-scroll-component";

function App() {

    const [items, setItems] = useState([]);

    useEffect(() => {
        getData();
    }, []);

    function getData() {
        setItems(items.concat(Array.from({length: 20})));
    }

    return (
        <div className="App">
            <div
                id="scrollableDiv"
                style={{
                    height: 300,
                    overflow: 'auto',
                    display: 'flex',
                    flexDirection: 'column-reverse',
                }}>

                <InfiniteScroll
                    dataLength={items.length}
                    next={getData}
                    hasMore={true}
                    loader={<h4>Loading...</h4>}
                    endMessage={
                        <p style={{ textAlign: 'center' }}>
                            <b>Yay! You have seen it all</b>
                        </p>
                    }
                    refreshFunction={getData}
                    pullDownToRefresh
                    pullDownToRefreshThreshold={50}
                    pullDownToRefreshContent={
                        <h3 style={{textAlign: 'center'}}>&#8595; Pull down to refresh</h3>
                    }
                    releaseToRefreshContent={
                        <h3 style={{textAlign: 'center'}}>&#8593; Release to refresh</h3>
                    }>

                    {items.map((i, index) => (
                        <div key={index}>
                            div - #{index}
                        </div>
                    ))}

                </InfiniteScroll>
            </div>
        </div>
    );
}

export default App;

Se provate a "tirare giù la pagina con il mouse" (tipo pullo-down con il cellulare) noterete che si aggiungeranno i dati alla lista.

Qui non prendiamo i dati da una API remota; per integrarlo con dei dati presi dal server dovreste fare un pò di lavoro extra.

Enjoy!