react-smart-gallery

Render images based on optimal layout, like facebook render images inside timeline.

Demo: https://gauravchl.github.io/react-smart-gallery/demo/

Install:

npm install react-smart-gallery

Use:

import SmartGallery from 'react-smart-gallery';
 
const images = [
  'https://source.unsplash.com/random/400x400',
  'https://source.unsplash.com/random/400x400',
  'https://source.unsplash.com/random/400x400',
];
 
<SmartGallery images={images} />

Props:

Props	Type	Description
images	[string]	Array of image source url
rootStyle	object	Style for root element
width	number	Width of gallery box (default 500)
height	number	Height of gallery box (default 500)
onImageSelect	function	Called when user click on any image item. e.g. function(event, src, index) {window.open(src)}
onLoad	function	Runs after images prepared and loaded in UI.

More Examples:

[with custom width and height]

import SmartGallery from 'react-smart-gallery';
 
const images = [
  'https://source.unsplash.com/random/400x400',
  'https://source.unsplash.com/random/400x400',
  'https://source.unsplash.com/random/400x400',
];
 
<SmartGallery width={800} height={800} images={images} />
 

[with custom style and callback]

import SmartGallery from 'react-smart-gallery';
 
const images = [
  'https://source.unsplash.com/random/400x400',
  'https://source.unsplash.com/random/400x400',
  'https://source.unsplash.com/random/400x400',
];
 
<SmartGallery
  rootStyle={{boxShadow: '2px 2px 4px #000'}}
  images={images}
  onImageSelect={(event, src) => window.open(src)}
/>
 

Contributing:

Please feel free to submit any bugs or suggestions as issues. Pull requests are welcome. To build package locally run following commands which will build the package from source and will update the demo inside /react-smart-gallery/demo/.

cd /react-smart-gallery/
npm install
npm run build

TODOs:

• Update props.images to support array of objects, Send image's width and height along with src within this props to improve performance.
• Add new prop imageStyle to style the image element