0.2.1 • Published 4 years ago

react-dynamic-image-gallery v0.2.1

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

###Installation

npm install react-dynamic-image-gallery

Demo

demo preview

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

0.2.1

4 years ago

0.2.0

4 years ago

0.1.19

4 years ago

0.1.18

4 years ago

0.1.17

4 years ago

0.1.15

4 years ago

0.1.16

4 years ago

0.1.14

4 years ago

0.1.13

4 years ago

0.1.12

4 years ago

0.1.11

4 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago