https://github.com/b-owl/overlay-image-gallery
Overlay image gallery with multi-step image previews.
https://github.com/b-owl/overlay-image-gallery
gallery-images image-gallery library npm-package overlay-image overlay-image-gallery package preview-image reactjs
Last synced: 6 months ago
JSON representation
Overlay image gallery with multi-step image previews.
- Host: GitHub
- URL: https://github.com/b-owl/overlay-image-gallery
- Owner: b-owl
- Created: 2024-07-11T16:11:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-02T10:00:05.000Z (about 1 year ago)
- Last Synced: 2025-03-25T01:17:47.057Z (7 months ago)
- Topics: gallery-images, image-gallery, library, npm-package, overlay-image, overlay-image-gallery, package, preview-image, reactjs
- Language: TypeScript
- Homepage: https://b-owl.github.io/overlay-image-gallery/
- Size: 1.18 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Overlay Image Gallery
[](https://badge.fury.io/js/overlay-image-gallery)
[](https://www.npmjs.com/package/overlay-image-gallery)
[](https://bundlephobia.com/package/overlay-image-gallery)
###### Overlay Image Gallery is a versatile React component designed for creating stunning image galleries and carousels effortlessly.
## Preview
[`Live Demo`](https://b-owl.github.io/overlay-image-gallery/)
## Installation
To get started, install the package using npm or yarn:
```bash
npm install overlay-image-gallery
```
###### Or
```bash
yarn add overlay-image-gallery
```
## Usage
Here's a quick example of how to use the ImageGallery component in your React application:
```js
import { ImageGallery } from "overlay-image-gallery";
const App = () => {
const images = [
"https://example.com/image1.jpg",
"https://example.com/image2.jpg",
"https://example.com/image3.jpg",
];
return ;
};
export default App;
```
## Props
| **Prop** | **Type** | **Description** |
| ------------ | ----------- | ----------------------------------------------------------------------------- |
| `images` | Array | **(Required)** Array of image URLs. |
| `width` | Number (px) | Width of the gallery, e.g., width={600}. |
| `height` | Number (px) | Height of the gallery, e.g., height={600}. |
| `grid` | String | Layout style, default is `v1`. Options are `v1` and `v2`. |
| `fullScreen` | Boolean | **(Optional)** If true, the gallery will occupy full screen width and height. |
## Contributing
We 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.
- Follow eslint provided
- Write [clean](https://github.com/ryanmcdermott/clean-code-javascript) code
## Running Locally
```
git clone https://github.com/b-owl/overlay-image-gallery.git
cd overlay-image-gallery
npm install
npm run dev
```
Then open [`localhost:3000`](http://localhost:3000) in a browser.
## License
This project is licensed under the MIT License.