GalleryFy is a simple React library to show images and PDF files in the gallery.
- Node v14+
- NPM v6+
npm i @deesouza/galleryfy
export default function Home() {
const dataSource = [
'https://cdn.images.com/image-1.png',
'https://cdn.images.com/image-2.png',
'https://cdn.images.com/image-3.png',
'https://s29.q4cdn.com/175625835/files/doc_downloads/test.pdf'
];
const [openIn, setOpenIn] = useState(0);
const [open, setOpen] = useState(false);
function handleOpen(index: number) {
setOpenIn(index);
setOpen(true);
}
return (
<div>
<GalleryFy
open={open}
dataSource={dataSource}
startIn={openIn}
handleClose={() => setOpen(false)}
/>
<div>
{dataSource.map((item, index) => (
<div key={item} onClick={() => handleOpen(index)}>
<span>{item}</span>
</div>
))}
</div>
</div>
);
}
You can also use images from assets.
import image1 from '@assets/images/image-1.jpg';
const images = [
image1
];
- Zoom
- Draggable
- Rotate
- Thumbnails
- Navigation
- Image Viewer
- PDF Viewer
Contributions, issues and feature requests are welcome. Feel free to check issues page.
Copyright © 2023 Diego Souza. This project is MIT licensed.