react-dynamic-image-gallery

Installation

npm install react-dynamic-image-gallery

Demo

Live demo here

Usage

import React, { useState } from 'react'
import Gallery from 'react-dynamic-image-gallery'
 
const IMAGES = [
    { id: 1, path: 'https://images.unsplash.com/photo-1595378502218-c4ff99cafee1?..' },
    { id: 2, path: 'https://images.unsplash.com/photo-1595478395763-d8ab3913dd3e?..' },
    { id: 3, path: 'https://images.unsplash.com/photo-1595434483030-06faf2906ef6?..' },
    { id: 4, path: 'https://images.unsplash.com/photo-1594936746765-738573bac82d?..' },
    { id: 5, path: 'https://images.unsplash.com/photo-1595371688830-558af78b9a24?..' },
    { id: 6, path: 'https://images.unsplash.com/photo-1595262918112-a7d7d9c06fa4?..' },
    { id: 7, path: 'https://images.unsplash.com/photo-1536882240095-0379873feb4e?..' },
]
 
function App() {
    const [source, setSource] = useState(IMAGES)
    const onUpload = ({ target }) => {
        const nextFirstImageId = IMAGES.length + 1
        const uploadedImageObjects = Array.from(target.files).map((file, index) => ({
            id: nextFirstImageId + index,
            path: URL.createObjectURL(file),
        }))
        setSource([...uploadedImageObjects, ...source])
    }
    
    return (
        <div className="App">
          <Gallery
            source={source}
            itemsToShow={3}
            itemsToShowInPreview={5}
            onUpload={onUpload}
            uploadEnabled
          />
        </div>
    )
}
 
export default App

Props

in progress