Nutritious Pumpkin Masses

    react-smart-gallery

    0.2.0 • Public • Published

    react-smart-gallery npm npm

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

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

    screen shot 2017-02-22 at 11 46 55 pm screen shot 2017-02-22 at 11 48 15 pm

    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

    Install

    npm i react-smart-gallery

    DownloadsWeekly Downloads

    88

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • gauravchl