Image viewer librray for react apps

Preface

Zoombox is inspired from my original zoombox script, which was originally developed in vanilla javascript. Please click here to implement zoombox in non-react apps.

Please consider contributing to zoombox at here.

Demo

Click / Tap below images

Sample

import React, { useState } from "react";
import Zoombox from "zoombox";

const App = () => {
  const [active, setActive] = useState(false);
  const images = [
    {
      src: "https://picsum.photos/id/222/1200/800",
      caption: "This is caption one",
    },
    {
      src: "https://picsum.photos/id/230/1200/800",
      caption: "This is caption two",
    },
    {
      src: "https://picsum.photos/id/120/1200/800",
      caption: "This is caption three",
    },
  ];
  return (
    <>
      <button onClick={() => setActive(true)}>
        Click to Open Zoombox, or click on above images
      </button>
      <Zoombox
        {...{
          images,
          active,
          setActive,
        }}
      />
    </>
  );
};
export default App;

Features yet to come

• Lazy loading
• Touch control for mobile devices
• Slide show
• Image Drag