Zoombox NPM | npm.io

alt text

An interactive image viewer library for react.

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

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

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.