Image viewer (aka Lightbox) made for React. Images only (no videos, iframes, custom html, ...), with a focus on touch interactions (swipe between images, pinch to zoom, pan around, swipe down to dismiss). Internal heavy lifting is done by react-spring and use-gesture. Supports code-splitting by default (image viewer code is only loaded once first opened). The image viewer chunk comes at around 37kB gzipped.
Demo: https://codesandbox.io/s/react-image-viewer-hook-demo-6ty7g
Example:
import { useImageViewer } from 'react-image-viewer-hook'
function Page() {
const { getOnClick, ImageViewer } = useImageViewer()
return (
<>
<a href="image1.jpg" onClick={getOnClick(image1.jpg)}><img src="image1_thumb.jpg" /></a>
<a href="image2.jpg" onClick={getOnClick(image2.jpg)}><img src="image2_thumb.jpg" /></a>
<ImageViewer /> {/* can be rendered wherever you want - like in a portal */}
</>
)
}