overlay-image-gallery
TypeScript icon, indicating that this package has built-in type declarations

1.0.19 • Public • Published

Overlay Image Gallery

npm version Download Count Bundle size

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

Preview

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.

Package Sidebar

Install

npm i overlay-image-gallery

Weekly Downloads

33

Version

1.0.19

License

MIT

Unpacked Size

167 kB

Total Files

24

Last publish

Collaborators

  • blue-owl