https://github.com/deesouza/galleryfy
GalleryFy is a React library to show images in the gallery.
https://github.com/deesouza/galleryfy
gallery image-gallery javascript react react-gallery
Last synced: 3 months ago
JSON representation
GalleryFy is a React library to show images in the gallery.
- Host: GitHub
- URL: https://github.com/deesouza/galleryfy
- Owner: DeeSouza
- License: mit
- Created: 2023-07-26T14:52:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-03T18:00:13.000Z (almost 2 years ago)
- Last Synced: 2025-09-20T13:56:54.176Z (7 months ago)
- Topics: gallery, image-gallery, javascript, react, react-gallery
- Language: TypeScript
- Homepage: https://deesouza.github.io/GalleryFy/
- Size: 15.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GalleryFy
GalleryFy is a simple React library to show images and PDF files in the gallery.
## Prerequisites
- Node v18+
- NPM v10+
## Install
```bash
npm i @deesouza/galleryfy
```
## Usage
```jsx
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 (
setOpen(false)}
/>
{dataSource.map((item, index) => (
handleOpen(index)}>
{item.src}
))}
);
}
```
You can also use images from assets.
```js
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](https://github.com/deesouza/galleryfy/issues).
## License
Copyright © 2023 [Diego Souza](https://github.com/deesouza).
This project is [MIT](./LICENSE) licensed.