Not working on react 18

[Gyan555]

React-zoom-pan-pinch is not working properly on react 18 and giving warning and error in terminal.

[hadarhubara10]

Look in this issues https://github.com/prc5/react-zoom-pan-pinch/issues/292

[janaagaard75]

This has been fixed in https://github.com/proNestorAps/react-zoom-pan-pinch.

[prc5]

This is fixed with the new version 2.2.0 of library.

[ravulask]

Team could you please help me with below issue please

Issue: Once Image is zoomed it does not allow to Pan/move to certain area of image. It does work when i remove the code from Modal Tag. But I am showing image in a modal Pop up and allowing user to better zoom in image.

Code: import React from "react";

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

import { Modal } from "@fluentui/react";

import { ScrollablePane, IScrollablePaneStyles } from "@fluentui/react/lib/ScrollablePane";

function App() { const Controls = () => { const { zoomIn, zoomOut, resetTransform } = useControls();

return (
  <>
    <button onClick={() => zoomIn()}>Zoom In</button>

    <button onClick={() => zoomOut()}>Zoom Out</button>

    <button onClick={() => resetTransform()}>Reset</button>
  </>
);

};

return ( <Modal isOpen={true} allowTouchBodyScroll={true}> <TransformWrapper options={{ pan: true }}> <Controls />

    <TransformComponent options={{ allowTouchBodyScroll: true }}>
      <img
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
        alt="test"
        width="500px"
        height="500px"
      />
    </TransformComponent>
  </TransformWrapper>
</Modal>

); }

export default App;