Immagini lazy loading in React con react-lazy-load-image-component

react-lazy-load-image-component è un componente per React che ci permette di fare il lazy loading delle immagini.

In questo articolo vediamo come usarlo; per facilitarci la vita prenderemo le immagini da Lorem Picsum.

Per installare il componente possiamo usare npm:

npm i react-lazy-load-image-component

Qui sotto il codice di esempio:

import React from 'react';
import {LazyLoadImage} from 'react-lazy-load-image-component';

function App() {

    const arrayPhoto = (items: number) => [...Array.from(Array(items).keys())];

    return (
        <div>
            {
                arrayPhoto(15).map(i => (
                    <>
                        <LazyLoadImage
                            key={i}
                            src={`https://picsum.photos/id/${i}/200`}
                            alt={`Image Alt-${i}`}
                            className="img-lazy"/>
                        <br/>
                    </>
                ))
            }
        </div>
    );
}

export default App;

Ovviamente al componente possiamo passare anche attributi come le dimensioni, oppure associargli delle regole di stile.

Enjoy!