GalleryFy

GalleryFy is a simple React library to show images and PDF files in the gallery.

Prerequisites

• Node v18+
• NPM v10+

Install

npm i @deesouza/galleryfy

Usage

export default function Home() {
  const dataSource = [
    {
      src: "https://cdn.images.com/image-1.png",
      title: "Image",
    },
    {
      src: "https://s29.q4cdn.com/175625835/files/doc_downloads/test.pdf",
      title: "File 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.src} onClick={() => handleOpen(index)}>
            <span>{item.src}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

You can also use images from assets.

import image1 from "@assets/images/image-1.jpg";

const images = [{ src: image1 }];

Features

• Zoom
• Draggable
• Rotate
• Thumbnails
• Navigation
• Image Viewer
• PDF Viewer

Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page.

License

Copyright © 2023 Diego Souza. This project is MIT licensed.