I'm using an npm called react-zoom-pan-pinch which has multiple func as props. but I want to call some of them outside of the component.
how can I call the component functions in my own function?
const handleShiftClick = () => {
if (event.shiftKey) {
zoomOut();// component function
}
};
return (
<div className="App">
<TransformWrapper initialScale={1}>
// functions
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
<>
<div className="tools">
<Hotkeys keyName={keys.ZOOM_IN} onKeyDown={() => zoomIn()}>
<button onClick={() => zoomIn()}>+ key</button>
</Hotkeys>
</div>
<TransformComponent></TransformComponent>
</>
)}
</TransformWrapper>
</div>
);
const transformRef = useRef(null);
const handleShiftClick = () => {
if (event.shiftKey) {
transformRef.current?.zoomOut();// component function
}
};
return (
<div className="App">
<TransformWrapper initialScale={1} ref={transformRef}>
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
<>
<div className="tools">
<Hotkeys keyName={keys.ZOOM_IN} onKeyDown={() => zoomIn()}>
<button onClick={() => zoomIn()}>+ key</button>
</Hotkeys>
</div>
<TransformComponent></TransformComponent>
</>
)}
</TransformWrapper>
</div>
)
TransformWrapper support forwardRef
You can pass them to a outer function.
const manageKeyPress = (funcs) => {
return (event) => {
const {zoomIn, zoomOut, resetTransform} = funcs;
if(event.shiftKey) {
zoomOut();
}
}
};
return (
<div className="App">
<TransformWrapper initialScale={1}>
// functions
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
<>
<div className="tools">
<Hotkeys keyName={keys.ZOOM_IN} onKeyDown={manageKeyPress({zoomIn, zoomOut, resetTransform})}>
<button onClick={() => zoomIn()}>+ key</button>
</Hotkeys>
</div>
<TransformComponent></TransformComponent>
</>
)}
</TransformWrapper>
</div>
);