useZoomImage

Expand images to full screen with smooth animation

Example

import { useZoomImage } from 'usezoomimage';

function App() {
  const [showImage, setShowImage] = React.useState(false);

  const [ref, ExpandedImage] = useZoomImage(showImage, { backdrop: true });

  return (
    <div>

      <img
        ref={ref}
        src={PlaceholderImage}
        alt="Placeholder Image"
        width={450}
        height={300}
        onClick={() => setShowImage(true)}
        style={{
          cursor: 'pointer',
          opacity: showImage ? 0 : 1
        }}
      />
      <ExpandedImage backdropOnClick={() => setShowImage(false)} />

    </div>
  );
};