react-img-grid v1.0.4

A responsive staggered image-grid react component with lightbox and lazy-load support.

Install

npm install --save-dev react-image-grid

Basic Usage

import ImageGrid from 'react-image-grid';

function App(props){

     const IMAGES = [
        {
            src: 'https://example.com/my-image-1.jpg',
            alt: 'Sample Alt Text 1',
        },
        {
            src: 'https://example.com/my-image-2.jpg',
            alt: 'Sample Alt Text 2',
        },
    ];

    return (
       <ImageGrid images={IMAGES}/>
    );
}

Lazy Loading Images

Lazy loading images can be achieved using the onBottomVisible prop which takes a callback that is called when the bottom of the image grid comes into view.

Here's an example of how you might setup lazy loading in an app:

import React, {useState} from 'react';
import ImageGrid from 'react-image-grid';


function App(props){
     
     const [imgs, setImgs] = useState([]);
     
     async function loadMoreImages(){
		 
		 try{
		 
			 let page_num = imgs / [Per Page Image Count];
			 
			 await fetch(`https://[Your Image Endpoint]/${page_num}`);
			 
			 setImgs([...imgs,  new_imgs]);
			 
		 }catch(err)
			 console.error(err);
		 }
	 }

    return (
       <ImageGrid 
           images={imgs}
           onBottomVisible={loadMoreImages}
       />
    );
}

Props

Image Properties