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 }];

API

| Prop | Value | Default | Description | | :------------------ | :-------------- | :------ | :----------------------------------- | | open | boolean | false | Control open and close of gallery | | dataSource | array | | Data of gallery | | startIn | number | | Index than start gallery | | handleClose | function | | Function execute to close gallery | | showThumbs | boolean | true | Show thumbnails | | fullWidth | boolean | false | iFrame PDF with full width in window | | positionPlacement | top, bottom | top | Position of bar control | | showTitle | boolean | false | Show title of image or PDF | | ... | ... | | ... |

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.