{"id":26655541,"url":"https://github.com/b-owl/overlay-image-gallery","last_synced_at":"2025-04-11T09:00:26.749Z","repository":{"id":248543630,"uuid":"827422541","full_name":"b-owl/overlay-image-gallery","owner":"b-owl","description":"Overlay image gallery with multi-step image previews.","archived":false,"fork":false,"pushed_at":"2024-10-02T10:00:05.000Z","size":1233,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T01:17:47.057Z","etag":null,"topics":["gallery-images","image-gallery","library","npm-package","overlay-image","overlay-image-gallery","package","preview-image","reactjs"],"latest_commit_sha":null,"homepage":"https://b-owl.github.io/overlay-image-gallery/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/b-owl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-07-11T16:11:38.000Z","updated_at":"2024-10-02T10:00:09.000Z","dependencies_parsed_at":"2024-08-27T07:36:37.493Z","dependency_job_id":"7ae30212-0c20-4636-8e2d-14406b8f976d","html_url":"https://github.com/b-owl/overlay-image-gallery","commit_stats":null,"previous_names":["b-owl/overlay-image-gallery"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-owl%2Foverlay-image-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-owl%2Foverlay-image-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-owl%2Foverlay-image-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-owl%2Foverlay-image-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b-owl","download_url":"https://codeload.github.com/b-owl/overlay-image-gallery/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248363706,"owners_count":21091427,"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":["gallery-images","image-gallery","library","npm-package","overlay-image","overlay-image-gallery","package","preview-image","reactjs"],"created_at":"2025-03-25T06:26:38.123Z","updated_at":"2025-04-11T09:00:26.729Z","avatar_url":"https://github.com/b-owl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Overlay Image Gallery\n\n[![npm version](https://badge.fury.io/js/overlay-image-gallery.svg)](https://badge.fury.io/js/overlay-image-gallery)\n[![Download Count](http://img.shields.io/npm/dm/overlay-image-gallery.svg?style=flat)](https://www.npmjs.com/package/overlay-image-gallery)\n[![Bundle size](https://badgen.net/bundlephobia/minzip/overlay-image-gallery)](https://bundlephobia.com/package/overlay-image-gallery)\n\n###### Overlay Image Gallery is a versatile React component designed for creating stunning image galleries and carousels effortlessly.\n\n## Preview\n\n![Preview](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNnhyODN6YWYwMTNxeGF6aXB3enJ0YW1xZjI5aTF2djg2cDV0OWw4YyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/z2O8LoBk5LZqLuSI5j/giphy.gif)\n\n[`Live Demo`](https://b-owl.github.io/overlay-image-gallery/)\n\n## Installation\n\nTo get started, install the package using npm or yarn:\n\n```bash\nnpm install overlay-image-gallery\n```\n\n###### Or\n\n```bash\nyarn add overlay-image-gallery\n```\n\n## Usage\n\nHere's a quick example of how to use the ImageGallery component in your React application:\n\n```js\nimport { ImageGallery } from \"overlay-image-gallery\";\nconst App = () =\u003e {\n  const images = [\n    \"https://example.com/image1.jpg\",\n    \"https://example.com/image2.jpg\",\n    \"https://example.com/image3.jpg\",\n  ];\n\n  return \u003cImageGallery images={images} width={800} height={600} grid=\"v1\" /\u003e;\n};\n\nexport default App;\n```\n\n## Props\n\n| **Prop**     | **Type**    | **Description**                                                               |\n| ------------ | ----------- | ----------------------------------------------------------------------------- |\n| `images`     | Array       | **(Required)** Array of image URLs.                                           |\n| `width`      | Number (px) | Width of the gallery, e.g., width={600}.                                      |\n| `height`     | Number (px) | Height of the gallery, e.g., height={600}.                                    |\n| `grid`       | String      | Layout style, default is `v1`. Options are `v1` and `v2`.                     |\n| `fullScreen` | Boolean     | **(Optional)** If true, the gallery will occupy full screen width and height. |\n\n## Contributing\n\nWe welcome contributions! When making a pull request, please focus on a specific issue. Avoid combining multiple changes in one PR. Describe your feature or implementation clearly. For major changes or if you're unsure about the usefulness of a change, please open an issue first to discuss it.\n\n- Follow eslint provided\n- Write [clean](https://github.com/ryanmcdermott/clean-code-javascript) code\n\n## Running Locally\n\n```\ngit clone https://github.com/b-owl/overlay-image-gallery.git\ncd overlay-image-gallery\nnpm install\nnpm run dev\n```\n\nThen open [`localhost:3000`](http://localhost:3000) in a browser.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-owl%2Foverlay-image-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb-owl%2Foverlay-image-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-owl%2Foverlay-image-gallery/lists"}