Overlay Image Gallery

Overlay Image Gallery is a versatile React component designed for creating stunning image galleries and carousels effortlessly.

Preview

Live Demo

Installation

To get started, install the package using npm or yarn:

npm install overlay-image-gallery

Or

yarn add overlay-image-gallery

Usage

Here's a quick example of how to use the ImageGallery component in your React application:

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 <ImageGallery images={images} width={800} height={600} grid="v1" />;
};

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 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 in a browser.

License

This project is licensed under the MIT License.