0.2.1 • Published 4 years ago
react-dynamic-image-gallery v0.2.1
###Installation
npm install react-dynamic-image-gallery
Demo
###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