ashkr808 / react-zoombox Goto Github PK

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;

import React, { useRef, 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'
    }
  ];
  const containerRef = useRef(null);
  return (
    <div ref={containerRef}>
      <div>
        {images.map((image) => (
          <img data-zoombox data-caption={image.caption} key={image.src} src={image.src} alt={image.caption} height={200} style={{ margin: '10px' }} />
        ))}
      </div>
      <Zoombox
        {...{
          containerRef,
          active,
          setActive,
          maskClosable: true
        }}
      />
    </div>
  );
};
export default App;