Skip to main content

React

Panzoom is written using plain JavaScript with no third party libraries. There is currently no official wrapper for React, but it's quite easy to create one.

Example of a React function component that uses hooks:

import React, { useRef, useEffect } from "react";
import { Panzoom as NativePanzoom } from "/static/lib/[email protected]/panzoom.esm.js";import "/static/lib/[email protected]/panzoom.css";
// Add `Controls` pluginimport { Controls } from "/static/lib/[email protected]/panzoom.controls.esm.js";
NativePanzoom.Plugins = {  Controls,};
import "/static/lib/[email protected]/panzoom.controls.css";
function ReactPanzoom(props) {  const wrapper = useRef(null);
  useEffect(() => {    const instance = new NativePanzoom(wrapper.current, props.options || {});
    return () => {      instance.destroy();    };  }, []);
  return (    <div className="panzoom" ref={wrapper}>      <img className="panzoom__content" src={props.src} />    </div>  );}
export default ReactPanzoom;

Usage example:

<Panzoom  src="/img/floor_plan.jpg"  options={{    click: () => {      alert("Clicked!");    },  }}/>

Result: