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