react-images-grid

React Images Grid =================

Usage no npm install needed!

<script type="module">
  import reactImagesGrid from 'https://cdn.skypack.dev/react-images-grid';
</script>

README

React Images Grid

Component to create a flexible responsive images grid using flex box and React.

Screenshot

Installation

yarn install react-images-grid
# or
npm install react-images-grid

Usage

import React from 'react';
import {Gallery} from 'react-images-grid';

import 'react-images-grid/src/styles.css';

export default () => (
    <div style={{maxWidth: '1200px', margin: '0 auto'}}>
        <Gallery
            images={[
                {src: '/Image-01.jpg', thumbnail: '/Image-01.jpg', title: 'Streets of Toronto', width: 500, height: 600},
                {src: '/Image-02.jpg', thumbnail: '/Image-02.jpg', title: 'University', width: 500, height: 600},
                {src: '/Image-03.jpg', thumbnail: '/Image-03.jpg', title: 'Museum', width: 500, height: 600},
                {src: '/Image-04.jpg', thumbnail: '/Image-04.jpg', title: 'Niagara in the night', width: 500, height: 600},
                {src: '/Image-05.jpg', thumbnail: '/Image-05.jpg', title: 'Niagara', width: 500, height: 600},
                {src: '/Image-06.jpg', thumbnail: '/Image-06.jpg', title: 'Niagara, view from the car', width: 500, height: 600},
            ]}
            onSelect={index => console.log('Selected', index)}
        />
    </div>
);

If you don't know exact sizes use GalleryMeasurer:

import React from 'react';
import {GalleryMeasurer} from 'react-images-grid';

import 'react-images-grid/src/styles.css';

export default () => (
    <div style={{maxWidth: '1200px', margin: '0 auto'}}>
        <GalleryMeasurer
            images={[
                {src: '/Image-01.jpg', thumbnail: '/Image-01.jpg', title: 'Streets of Toronto'},
                {src: '/Image-02.jpg', thumbnail: '/Image-02.jpg', title: 'University'},
                {src: '/Image-03.jpg', thumbnail: '/Image-03.jpg', title: 'Museum'},
                {src: '/Image-04.jpg', thumbnail: '/Image-04.jpg', title: 'Niagara in the night'},
                {src: '/Image-05.jpg', thumbnail: '/Image-05.jpg', title: 'Niagara'},
                {src: '/Image-06.jpg', thumbnail: '/Image-06.jpg', title: 'Niagara, view from the car'},
            ]}
            onSelect={index => console.log('Selected', index)}
        />
    </div>
);

API

Both Gallery and GalleryMeasurer accept following props:

  • images — an array of images in following format {src: string, thumbnail: string, title: string, width?: number, height?: number}
  • onSelect — callback called when thumbnail has been clicked
  • maxOccupiedSpace = 0.3 — maximum horizontal space occupied by single thumbnail (good for panoramas and wide images)
  • minOccupiedSpace = 0.15 — minimum horizontal space occupied by single thumbnail (good for portraits and tall images)

GalleryMeasurer

  • Loading — a component will be shown while measuring is in progress
  • Error — a component will be shown if measuring encountered an error: <Error error={error}/>
  • Empty — a component will be shown if no images provided