React

First, follow the installation instructions to add the NPM package @fancyapps/ui.

Use the usePanzoom hook sample code or create your own wrapper based on it:

usePanzoom.js

import { useRef, useState, useCallback, useEffect } from "react";

import { Panzoom } from "@fancyapps/ui/dist/panzoom/";
import "@fancyapps/ui/dist/panzoom/panzoom.css";

import { canUseDOM } from "@fancyapps/ui/dist/utils/canUseDOM.js";
import { isEqual } from "@fancyapps/ui/dist/utils/isEqual.js";

export default function usePanzoom(options = {}) {
  const storedOptions = useRef(options);

  const [container, setContainer] = useState(null);
  const [panzoomInstance, setPanzoomInstance] = useState(undefined);

  const reInit = useCallback(() => {
    if (panzoomInstance) {
      panzoomInstance.destroy().init();
    }
  }, [panzoomInstance]);

  useEffect(() => {
    if (!isEqual(options, storedOptions.current)) {
      storedOptions.current = options;
      reInit();
    }
  }, [options, reInit]);

  useEffect(() => {
    if (canUseDOM() && container) {
      const newPanzoomInstance = Panzoom(
        container,
        storedOptions.current
      ).init();

      setPanzoomInstance(newPanzoomInstance);

      return () => {
        newPanzoomInstance.destroy();
      };
    } else {
      setPanzoomInstance(undefined);
    }
  }, [container]);

  return [setContainer, panzoomInstance];
}

usePanzoom.ts

import { useRef, useState, useCallback, useEffect } from "react";

import {
  type PanzoomOptions,
  type PanzoomInstance,
  Panzoom,
} from "@fancyapps/ui/dist/panzoom/";
import "@fancyapps/ui/dist/panzoom/panzoom.css";

import { canUseDOM } from "@fancyapps/ui/dist/utils/canUseDOM.js";
import { isEqual } from "@fancyapps/ui/dist/utils/isEqual.js";

export type PanzoomContainerRefType = <ContainerElement extends HTMLElement>(
  el: ContainerElement | null
) => void;

export type usePanzoom = [PanzoomContainerRefType, PanzoomInstance | undefined];

export default function usePanzoom(
  options: Partial<PanzoomOptions> = {}
): usePanzoom {
  const storedOptions = useRef(options);

  const [container, setContainer] = useState<HTMLElement | null>(null);
  const [panzoomInstance, setPanzoomInstance] = useState<
    PanzoomInstance | undefined
  >(undefined);

  const reInit = useCallback(() => {
    if (panzoomInstance) {
      panzoomInstance.destroy().init();
    }
  }, [panzoomInstance]);

  useEffect(() => {
    if (!isEqual(options, storedOptions.current)) {
      storedOptions.current = options;
      reInit();
    }
  }, [options, reInit]);

  useEffect(() => {
    if (canUseDOM() && container) {
      const newPanzoomInstance = Panzoom(
        container,
        storedOptions.current
      ).init();

      setPanzoomInstance(newPanzoomInstance);

      return () => {
        newPanzoomInstance.destroy();
      };
    } else {
      setPanzoomInstance(undefined);
    }
  }, [container]);

  return [setContainer, panzoomInstance];
}

Usage:

function App() {
  const [panzoomRef] = usePanzoom({
    // Your custom options
  });

  return (
    <div ref={panzoomRef} style={{ height: "400px" }}>
      <img
        className="f-panzoom__content"
        src="https://lipsum.app/id/60/2000x1500"
        width="2000"
        height="1500"
        alt="Sample image"
      />
    </div>
  );
}

Here is a sample of how to access the Panzoom API:

const [panzoomRef, panzoomInstance] = usePanzoom({
  // Your custom options
});

useEffect(() => {
  if (panzoomInstance) {
    // Access API
    console.log(panzoomInstance.getContainer());
  }
}, [panzoomInstance]);