An interactive image viewer library for react.

Zoombox is a lightweight library for adding an intreratcive image viewer into your react app.

Demo

Click here to try live demo

Features

• Easy to integrate, now even more easier with scan mode.
• Caption in images.
• Area specific zoom based on cursor position.
• Image preview for next and previuos image.
• Image drag to view the different parts of it while image zoomed in.
• Control over the behaviour.
• Mobile Responsive

Get Started

yarn add zoombox

or

npm i zoombox

Example

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;

Example for Scan Mode

In scan mode zoombox will automatically scan for the images inside given containerRef and generates the images automatically so in that case you don't need to pass images prop, Zoombox will scan <img/> tag which will have data-zoombox attribute, this will also add click event to images on clicking which zoombox will get opened with that particular image.

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;

API

| Prop | Type | Default value | Description | | --- | ----------- | ----------- | ----------- | | images | [{ src: "https://picsum.photos/200", caption?: "This is caption", }] | [] | Array of images with url of image in 'src' with optional 'caption' | | containerRef for scan mode ! | Ref of HTMLElement | [] | This will enable the scan mode, in which zoombox will automatically scan for the images inside given containerRef and generates the images automatically so in that case you don't need to pass images prop, Zoombox will scan <img/> tag which will have data-zoombox attribute and image src will be taken from src attribute and caption will be taken from data-caption attribute. So your img tag should look like this <img src="https://picsum.photos/200", data-zoombox data-caption="Caption goes here"/> this will also add click event to images on clicking which zoombox will get opened with that particular image. | | active* | boolean | false | To tell Zoombox weather to stay visible or not | setActive* | React.Dispatch <React.SetStateAction > | | To update the external active state | zIndex | number | 10000 | Sets the z-index css of ZoomBox's parent container |enableKeyboard MouseControls | boolean | true | Enable / Disable the mouse nad keyboard controls (right arrow -> next slide, left arrow -> prev slide, up arrow -> zoom in, down arrow -> zoom out ) | maskClosable | boolean | false | If sets to true, closes the zoombox when clicked on background mask. |enableZoom | 0 or 1 or 2 | 2 | 0 to disable zoom feature, 1 to enable center zoom, 2 for to enable area specific zoom based on cursor position. |closable | boolean | true | enable/disable close icon |dbClickToZoom | boolean | true | enable/disable the ability to zoom at 200% when user double clicks the image. |hideImagePreview | boolean | false | hides the bottom images preview in zoombox |lockBodyScroll | boolean | false | locks body from scrolling while zoombox is open |maskOpacity | number | 0.8 | sets the opacity of background mask |selectedImage| number | 0 | load the image at given index when zoombox gets opened |showCredits | boolean | false | shows "Image preview powered by Zoombox" in the corner, just in case if you wish to attribute zoombox. |enableImageDragBeta| boolean | false | It is in Beta mode so might not be perfect to use, When zoom is more than 150% then this will allow user to drag the active image in zoombox and see the different parts of it while zoomed in.

License

Zoombox is licensed under the MIT License.

Support

Zoombox is free to use and always will be, however if you wish to support you can always buy me a coffee !

Buy me a coffee

Or