react-img-view
MIT licensed · React 18 & 19 · No runtime dependencies
Headless, composable React image viewer
Zoom, pan, pinch, rotate, fit-to-window and 1:1 are handled by the library. The default UI is ready to use — and it is assembled entirely from exported parts, so any of it can be replaced with your own.
npm install react-img-viewOpen any image below: scroll to zoom at the cursor, drag to pan, arrow keys to page.
Integration: several ways to plug it in
Single image, image sets, and a function call are all supported. The interface is your choice: the CSS preset, the shadcn source, or something you compose yourself.
Customization: deep customization through composable design
Toolbar, buttons, and title can be swapped, added, removed, or reordered, even with components from your own design system.
Gestures: pinch, drag, and scroll to zoom
Pinch to zoom, drag to pan, scroll to zoom at the cursor — drag past the edge and it pages to the next image. Swipe-to-dismiss answers touch and pen only, so a mouse never closes it by accident.
Animation: smooth open and close
Opening grows the image out of its thumbnail. Closing shrinks it back, smooth the whole way.