Team,
Anyone could you please guide on below issue.
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 (
<>
zoomIn()}>Zoom In
zoomOut()}>Zoom Out
resetTransform()}>Reset
</>
);
};
return (
<img
alt="test"
width="500px"
height="500px"
/>
);
}
export default App;
Top comments (0)