{"id":21470417,"url":"https://github.com/webdevsk/image-gallery-dnd","last_synced_at":"2026-04-11T00:43:26.044Z","repository":{"id":204697053,"uuid":"712463142","full_name":"webdevsk/Image-Gallery-DND","owner":"webdevsk","description":"An Image gallery with Drag and Drop feature. Built with ReactJS.","archived":false,"fork":false,"pushed_at":"2023-12-19T11:26:24.000Z","size":4309,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T16:12:58.155Z","etag":null,"topics":["dndkit","drag-and-drop","gallery-images","image-gallery","image-gallery-application","image-gallery-react","react","reactjs","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"https://webdevsk.github.io/Image-Gallery-DND/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webdevsk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-31T14:17:30.000Z","updated_at":"2023-11-02T14:59:24.000Z","dependencies_parsed_at":"2024-11-23T10:16:30.252Z","dependency_job_id":null,"html_url":"https://github.com/webdevsk/Image-Gallery-DND","commit_stats":null,"previous_names":["webdevsk/image-gallery-dnd"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2FImage-Gallery-DND","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2FImage-Gallery-DND/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2FImage-Gallery-DND/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2FImage-Gallery-DND/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdevsk","download_url":"https://codeload.github.com/webdevsk/Image-Gallery-DND/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243988956,"owners_count":20379649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dndkit","drag-and-drop","gallery-images","image-gallery","image-gallery-application","image-gallery-react","react","reactjs","tailwindcss","vite"],"created_at":"2024-11-23T09:27:40.044Z","updated_at":"2025-12-31T00:18:13.182Z","avatar_url":"https://github.com/webdevsk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Replace these using search repo_name, project_title, short_description, project_description, view_demo_link --\u003e\n\u003c!-- Prepend a hash # to filter active ones --\u003e\n\u003c!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --\u003e\n\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n\u003c!-- [![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n[![LinkedIn][linkedin-shield]][linkedin-url] --\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.flaticon.com/free-icon/gallery_9853877\"\u003e\n    \u003cimg src=\"github_assets/logo.png\" alt=\"Logo\" width=\"100\" height=\"100\"\u003e\n  \u003c/a\u003e\n\n\u003ch3 align=\"center\"\u003eImage Gallery DND\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    A beautiful Image Gallery with Drag and Drop feature\n    \u003cbr /\u003e\n\n[**Explore the docs »**](https://github.com/webdevsk/Image-Gallery-DND)\n\n[View Demo](https://webdevsk.github.io/Image-Gallery-DND/)\n· [Report Bug](https://github.com/webdevsk/Image-Gallery-DND/issues)\n· [Request Feature](https://github.com/webdevsk/Image-Gallery-DND/issues)\n\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\u003cbr /\u003e\n\n- [About The Project](#about-the-project)\n  - [Built With](#built-with)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n- [Features](#features)\n  - [Featured Image](#featured-image)\n  - [Hover Overlay](#hover-overlay)\n  - [Drag And Drop](#drag-and-drop)\n  - [Set Featured](#set-featured)\n  - [Selection](#selection)\n  - [Image Box/Expand Image](#image-boxexpand-image)\n  - [Zoom, Pan and Pinch](#zoom-pan-and-pinch)\n  - [Add Your Own Images](#add-your-own-images)\n- [Contributing](#contributing)\n- [License](#license)\n- [Contact](#contact)\n\n\u003c/details\u003e\n\u003cbr/\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## About The Project\n\n\u003cdiv align=\"center\"\u003e\n\n[![Product snapshot](github_assets/snapshot.png)](https://webdevsk.github.io/Image-Gallery-DND/)\n\n\u003c/div\u003e\n\u003cbr/\u003e\n\nA beautiful Image Gallery with Sorting and Drag and Drop Support.\nFor full feature list, head over to the [Features](#features) section below.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Built With\n\n[![React][React]][React-url]  \n[![TailwindCSS][TailwindCSS]][Tailwind-url]  \n[![HEADLESS UI](https://img.shields.io/badge/HEADLESS_UI-111827?style=for-the-badge\u0026logo=headlessui\u0026logoColor=%2366E3FF)](https://headlessui.com/)  \n[![REACT ICONS](https://img.shields.io/badge/REACT_ICONS-f4f5f7?style=for-the-badge\u0026logo=react\u0026logoColor=%23e91e63)](https://react-icons.github.io/react-icons)  \n[![DND KIT](https://img.shields.io/badge/DND_KIT-000000?style=for-the-badge\u0026logo=dndkit\u0026logoColor=%23FFFFFF)](https://dndkit.com/)  \n[![REACT ZOOM PAN PINCH](https://img.shields.io/badge/REACT_ZOOM_PAN_PINCH-ffffff?style=for-the-badge\u0026logo=reactzoompanpinch\u0026logoColor=%23111111)](https://www.npmjs.com/package/react-zoom-pan-pinch)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\n🌐 The project is already live at: [https://webdevsk.github.io/Image-Gallery-DND/](https://webdevsk.github.io/Image-Gallery-DND/)\n\nOR\n\n🖥️ You can test it on your local machine by following the steps below.\n\n⭐ **Want to build a `Drag and Drop` only component from scratch? You can follow my own instructions here:**\n\n**( )=\u003e [Quick Setup DND Kit](docs/Quick%20Setup.md)**\n\n### Prerequisites\n\n1. **Install** [NODE.JS](https://nodejs.org/en/download) and [Git](https://git-scm.com/downloads)\n1. Open your projects base folder and launch any **terminal** of your choice.\n1. Run this command:\n\n   ```sh\n   npm install npm@latest -g\n   ```\n\n### Installation\n\n\u003c!-- 1. Get a free API Key at [https://example.com](https://example.com) --\u003e\n\n1. Clone the repo\n\n   ```sh\n   git clone https://github.com/webdevsk/Image-Gallery-DND.git\n   ```\n\n1. Install NPM packages\n\n   ```sh\n   npm install\n   ```\n\n1. Fill in a `.env.local` file following the patterns of `envSample.txt`\n\n1. Run Dev server\n\n   ```js\n   npm run dev\n   ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\n## Features\n\n### Featured Image\n\n- Built using CSS Grid layout. Fully responsive on all devices.\n- First image spans by 2 cells in both direction indicating a Featured Image.\n\n### Hover Overlay\n\n![Hover Overlay preview](github_assets/image-1.png)\n\n- Hover over an image to reveal an Overlay with action buttons.\n- useState hook allows each button to show up indivisually based on different scenarios.\n\n### Drag And Drop\n\n![Drag and Drop preview](github_assets/image.png)\n\n- Uses `dnd kit` library to allow drag and drop feature.\n- Supports `Pointer`, `Mouse`, `Touch` and `Keyboard` interactions for better accessibility.\n- Shows a `Duplicate element` that floats while dragging.\n- Shows a `Drop zone` with proper styling.\n- Animates on drop end.\n- `Sorts` the state variable based on drop source and target.\n- Animates on every `Sort` operations.\n\n### Set Featured\n\n- Overlay features a Set as Featured button.\n- Sorts the state variable array to move current item to the beginning.\n- Animates while being sorted.\n\n### Selection\n\n- Overlay features a Selection button.\n- Select/Mark, Unselect/Unmark items for deletion.\n- Gallery Header shows `Selected items count`, a `Batch Selection button` and `Delete button`.\n- Items are removed from State variable array upon deletion.\n\n### Image Box/Expand Image\n\n- Overlay features a Expand button.\n- Shows a `Dialogue` with the current image for a bigger view.\n- Button for closing the Dialogue. Clicking outside closes the dialogue as well.\n- Carefully setup Dialogue height and width for the Mobile support.\n\n### Zoom, Pan and Pinch\n\n- Uses `react-zoom-pan-pinch` library to allow expanded image to be interactive.\n- Supports `Mouse`, `Mouse Wheel` and `Touch` to effectively zoom, pan and pinch image.\n\n### Add Your Own Images\n\n- Press `Add Images` button to add your own.\n- File size validation:\n  - Upto 2MB (2048KB)\n- File format validation:\n  - Only allow types of file: image\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ROADMAP --\u003e\n\u003c!-- ## Roadmap\n\n- [ ] Feature 1\n- [ ] Feature 2\n- [ ] Feature 3\n    - [ ] Nested Feature\n\nSee the [open issues](https://github.com/webdevsk/repo_name/issues) for a full list of proposed features (and known issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e --\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n1. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n1. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n1. Push to the Branch (`git push origin feature/AmazingFeature`)\n1. Open a Pull Request\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTACT --\u003e\n\n## Contact\n\n[![Follow on GitHub][GitHub]](https://github.com/webdevsk)\n[![Follow on Linkedin][Linkedin]][Linkedin-url]\n\nProject Link: [https://github.com/webdevsk/Image-Gallery-DND](https://github.com/webdevsk/Image-Gallery-DND)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n\u003c!-- ## Acknowledgments\n\n* []()\n* []()\n* []()\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e --\u003e\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[Linkedin-url]: https://linkedin.com/in/webdevsk\n[GitHub]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white\n[Linkedin]: https://img.shields.io/badge/linkedin-%231E77B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\n[contributors-shield]: https://img.shields.io/github/contributors/webdevsk/Image-Gallery-DND.svg?style=for-the-badge\n[contributors-url]: https://github.com/webdevsk/Image-Gallery-DND/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/webdevsk/Image-Gallery-DND.svg?style=for-the-badge\n[forks-url]: https://github.com/webdevsk/Image-Gallery-DND/network/members\n[stars-shield]: https://img.shields.io/github/stars/webdevsk/Image-Gallery-DND.svg?style=for-the-badge\n[stars-url]: https://github.com/webdevsk/Image-Gallery-DND/stargazers\n[issues-shield]: https://img.shields.io/github/issues/webdevsk/Image-Gallery-DND.svg?style=for-the-badge\n[issues-url]: https://github.com/webdevsk/Image-Gallery-DND/issues\n[license-shield]: https://img.shields.io/github/license/webdevsk/Image-Gallery-DND.svg?style=for-the-badge\n[license-url]: https://github.com/webdevsk/Image-Gallery-DND/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[Next-url]: https://nextjs.org/\n[React]: https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\n[React-url]: https://reactjs.org/\n[TailwindCSS]: https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\n[Tailwind-url]: https://tailwindcss.com/\n[Bootstrap]: https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge\u0026logo=bootstrap\u0026logoColor=white\n[Bootstrap-url]: https://react-bootstrap.netlify.app/\n[SASS]: https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge\u0026logo=SASS\u0026logoColor=white\n[SASS-url]: https://sass-lang.com/\n[Chakra]: https://img.shields.io/badge/chakra-%234ED1C5.svg?style=for-the-badge\u0026logo=chakraui\u0026logoColor=white\n[Chakra-url]: https://chakra-ui.com/\n[MUI]: https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge\u0026logo=mui\u0026logoColor=white\n[MUI-url]: https://mui.com/\n[Styled Components]: https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge\u0026logo=styled-components\u0026logoColor=white\n[Styled-url]: https://www.styled-components.com/\n[React-router]: https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white\n[React-router-url]: https://reactrouter.com/\n[Redux]: https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white\n[Redux-url]: https://redux.js.org/\n[Three-js]: https://img.shields.io/badge/threejs-black?style=for-the-badge\u0026logo=three.js\u0026logoColor=white\n[Three-js-url]: https://threejs.org/\n[GSAP]: https://img.shields.io/badge/green%20sock-88CE02?style=for-the-badge\u0026logo=greensock\u0026logoColor=white\n[GSAP-url]: https://greensock.com/gsap/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdevsk%2Fimage-gallery-dnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdevsk%2Fimage-gallery-dnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdevsk%2Fimage-gallery-dnd/lists"}