I am using react-zoom-pan-pinch library for zoomIn and zoomOut. The problem I’m having is when grabbing and pulling the image, it goes out of bounds. I read docs, and it seems I need to use limitToBounds={true} which helps, but then it won’t help 100% because the image still goes out of bounds. It should be stuck to bounds , so my question is how to make the image stuck to bounds/borders, you should not be able to pull it out of bounds(all functionalities should work, just image stuck to bounds/borders).

try it here:

import React from "react";
import "./styles.css";

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

export default function App() {
  return (
    <div className="App">
      <div className="element">
        <TransformWrapper limitToBounds={true}>
          {({ zoomIn, zoomOut, resetTransform }: any) => (
            <React.Fragment>
              <div style={{ border: "1px solid black" }}>
                <div className="tools">
                  <button onClick={zoomIn}> </button>
                  <button onClick={zoomOut}>-</button>
                  <button onClick={resetTransform}>x</button>
                </div>
                <TransformComponent>
                  <img
                    width="100%"
                    src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"
                    alt="test 2"
                  />
                </TransformComponent>
              </div>
            </React.Fragment>
          )}
        </TransformWrapper>
      </div>
    </div>
  );
}

CodePudding user response：

you need to add these props inside the TransformWrapper component:

  alignmentAnimation={{ sizeX: 0, sizeY: 0 }}

your example:

codesandboxexample

hope that help :)