@deesouza/galleryfy NPM

GalleryFy

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

Example GalleryFy

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
...	...		...