React w3-light-gallery

Demo

Features

Responsive Design: Adjusts to various screen sizes, providing a consistent user experience across devices. Lightweight: Minimal dependencies and optimized code ensure fast load times. Easy to Use: Simple API for integration and customization.

w3-lightgallery is a lightweight, responsive, and easy-to-use gallery component for modern web applications. It provides a seamless experience for displaying images and videos with a clean and elegant interface.

Installation

npm install w3-light-gallery

Typical use:

import Gallery from "w3-light-gallery";

const mainImage = [
  { img: "https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg" },
  { img: "https://cdn.pixabay.com/photo/2018/10/06/08/45/still-3727477_1280.jpg" },
  { img: "https://images.freeimages.com/images/large-previews/6d5/lake-at-the-cottage-1372381.jpg?fmt=webp&w=500"},
  { img: "https://media.istockphoto.com/id/469738422/photo/large-boulders-on-lake-shore-at-sunset-minnesota-usa.jpg?s=612x612&w=0&k=20&c=4FzViDygZ8CgixTqt3VOudLJUP8uoSeh2UlD_qHYkAw=",},
  { img: "https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" },
];

const category = [
  {
    img: "https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg",
    title: "demo",
    categoryMedia: [
      { img: "https://i.pinimg.com/originals/bf/f4/8f/bff48f31c649bd8b691f6e8b548958a7.jpg" },
      {
        img: "https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg",
      },
    ],
  },
  {
    img: "https://cdn.pixabay.com/photo/2018/10/06/08/45/still-3727477_1280.jpg",
    title: "demo",
    categoryMedia: [
      {
        img: "https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg",
      },
    ],
  },
  {
    img: "https://images.freeimages.com/images/large-previews/6d5/lake-at-the-cottage-1372381.jpg?fmt=webp&w=500",
    title: "demo",
    categoryMedia: [
      { img: "https://t3.ftcdn.net/jpg/06/00/72/14/360_F_600721477_FUiQwTWA1Bz2ysl5H5e15OSZ8VtjPI7O.jpg" },
      {
        img: "https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg",
      },
    ],
  },
  {
    img: "https://media.istockphoto.com/id/469738422/photo/large-boulders-on-lake-shore-at-sunset-minnesota-usa.jpg?s=612x612&w=0&k=20&c=4FzViDygZ8CgixTqt3VOudLJUP8uoSeh2UlD_qHYkAw=",
    title: "demo",
    categoryMedia: [],
  },
  {
    img: "https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg",
    title: "demo",
    categoryMedia: [],
  },
];

function App() {
  return (
    <>
      <Gallery children={mainImage} category={category} />
    </>
  );
}

export default App;