Single Wrapper, multiple Components

Hi, I would like to have two images side by side that share the same TransformWrapper. The idea is that zooming or panning on one of the images also affects the scale and translation of the other. If I put two TransformComponents in the same TransformWrapper, I can only pan and zoom on the second one, although the effect are correctly applied to both components. Having a quick look at the code, it seems that it’s because a TransformWrapper only expects to have a single TransformComponent inside. Is there a way to enable the events also on the first image? The following is the pseudocode of my current approach:

      <TransformWrapper>
        <Row>
          <LeftCol>
            <TransformComponent>
              <Image1 />
            </TransformComponent>
          </LeftCol>
          <RightCol>
            <TransformComponent>
              <Image2 />
            </TransformComponent>
          </RightCol>
        </Row>
      </TransformWrapper>

Thanks!

[bmanga]

@sgentry I ended up writing the following:

function SideBySideSyncView(props) {
  const [scale, setScale] = useState(1);
  const [positionX, setPositionX] = useState(0);
  const [positionY, setPositionY] = useState(0);

  function update(stats) {
    setScale(stats.scale);
    setPositionX(stats.positionX);
    setPositionY(stats.positionY);
  }

  return (
    <Row>
      <LeftCol>
        <TransformWrapper
          positionX={positionX}
          positionY={positionY}
          scale={scale}
          onZoomChange={update}
          onPanning={update}
          onPanningStop={update}
          doubleClick={{ disabled: true }}
          reset={{ disabled: true }}
          pan={{ paddingSize: 0, velocityBaseTime: 0 }}
          scalePadding={{ disabled: true }}
        >
          <TransformComponent>{props.leftComponent}</TransformComponent>
        </TransformWrapper>
      </LeftCol>
      <RightCol>
        <TransformWrapper
          positionX={positionX}
          positionY={positionY}
          scale={scale}
          onZoomChange={update}
          onPanning={update}
          onPanningStop={update}
          doubleClick={{ disabled: true }}
          reset={{ disabled: true }}
          pan={{ paddingSize: 0, velocityBaseTime: 0 }}
          scalePadding={{ disabled: true }}
        >
          <TransformComponent>{props.rightComponent}</TransformComponent>
        </TransformWrapper>
      </RightCol>
    </Row>
  );
}

[minhdongsss]

you’re perfect, @bmanga ❤️