Overlay Image Gallery is a versatile React component designed for creating stunning image galleries and carousels effortlessly.
To get started, install the package using npm or yarn:
npm install overlay-image-galleryyarn add overlay-image-galleryHere'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;| 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. |
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
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.
This project is licensed under the MIT License.