react-smart-gallery v0.2.0

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:

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