PanAndZoomComponent

import React from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

const PanningInteractionHandler = (instance, state) => {
  if (state?.positionX >= 0 && state?.positionY >= 0 && state?.scale <= 1) {
    instance.setup.panning.disabled = true;
  } else {
    instance.setup.panning.disabled = false;
  }
};

export default function PanAndZoomComponent(props) {
  return (
    <TransformWrapper
      centerOnInit={true}
      centerZoomedOut={true}
      onZoomStop={(ref) => {
        PanningInteractionHandler(ref.instance, ref.state);
      }}
      onPanning={(ref) => {
        PanningInteractionHandler(ref.instance, ref.state);
      }}
      onInit={(ref) => {
        ref.instance.setup.panning.disabled = true;
      }}
    >
      {({ zoomIn, zoomOut, resetTransform, centerView, instance, state }) => (
        <div>
          <TransformComponent contentStyle={{ width: "100%" }}>
            <img />
          </TransformComponent>
          <div>
            <button
              onClick={() => {
                zoomIn();
                instance.setup.panning.disabled = false;
              }}
            >
              <img src={zoomInIcon} alt="Zoom In Icon" width={25} height={25} />
            </button>
            <button
              onClick={() => {
                zoomOut();
                PanningInteractionHandler(instance, state);
              }}
            >
              <img
                src={zoomOutIcon}
                alt="Zoom Out Icon"
                width={25}
                height={25}
              />
            </button>
            <button
              onClick={() => {
                resetTransform();
                instance.setup.panning.disabled = true;
              }}
            >
              <img src={resetIcon} alt="Reset Icon" width={25} height={25} />
            </button>
            <button onClick={() => centerView()}>
              <img src={centerIcon} alt="Center Icon" width={25} height={25} />
            </button>
          </div>
        </div>
      )}
    </TransformWrapper>
  );
}