Closed bimb closed 4 years ago
Can you provide example ?
I'm using the basic example,
import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";
class App extends React.Component {
quickPinchZoomRef = createRef();
imgRef = createRef();
onUpdate = ({ x, y, scale }) => {
const { current: img } = this.imgRef;
const value = make3dTransformValue({ x, y, scale });
img.style.setProperty("transform", value);
this.x = x;
this.y = y;
console.log({ x, y });
};
render() {
return (
div className="App"
QuickPinchZoom
ref={this.quickPinchZoomRef}
onUpdate={this.onUpdate.bind(this)}
verticalPadding={200}
horizontalPadding={200}
img
ref={this.imgRef}
src= https://user-images.githubusercontent.com/4661784/56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png
/
/QuickPinchZoom
/div
);
}
}
window.addEventListener("load", () => {
render(<App />, document.getElementById("test"));
});
It works for me, don't see the problem
import React, { createRef } from "react";
import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";
export default class App extends React.Component {
imgRef = createRef();
onUpdate = ({ x, y, scale }) => {
const { current: img } = this.imgRef;
const value = make3dTransformValue({ x, y, scale });
img.style.setProperty("transform", value);
};
render() {
return (
<div className="App">
<QuickPinchZoom
onUpdate={this.onUpdate}
verticalPadding={200}
horizontalPadding={200}
>
<img
ref={this.imgRef}
src="https://user-images.githubusercontent.com/4661784/56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png"
/>
</QuickPinchZoom>
</div>
);
}
}
I get always Cannot read property 'scrollLeft' of null, do you have any clue?
Thanks