Is it possible to make it fully controlled?

Something like this

import React, { Component } from "react";

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

class Example extends Component {
  const [state, setState] = useState([0, 0, 1]);
  render() {
    return (
      <TransformWrapper
        positionX={state[0]}
        positionY={state[1]}
        scale={state[2]}
        onChange={(newPositionX, newPositionY, newZoom) => setState([newPositionX, newPositionY, newZoom])}
      >
        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
          <React.Fragment>
            <div className="tools">
              <button onClick={zoomIn}>+</button>
              <button onClick={zoomOut}>-</button>
              <button onClick={resetTransform}>x</button>
            </div>
            <TransformComponent>
              <img src="image.jpg" alt="test" />
              <div>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}

Thanks.

[saidmoya12]

What do you need? You can use onZoom and onPanning to get changes

const onChangeRZPP = (refWrapper) => {
  console.log(refWrapper.state)
}
...
<TransformWrapper
  onPanning={onChangeRZPP }
  onZoom={onChangeRZPP}

and to set transform externally you can use “useRef”

const  RWrapper = useRef()

onYourFuncionDIspatch = (...newTransform) => {
  RWrapper.current.setTransform(...newTransform)
}
...
<TransformWrapper ref={RWrapper}>

[peter-jerry-ye]

Hi, I’ve tested the new API and it works well.

Here’s my sandbox link just for showing how to use a external state to unify the control if there were another controller.