[React] image 확대/축소(라이브러리 사용)

image를 마우스 wheel로 확대/축소하는 기능 구현

 

react-zoom-pan-pinch 라이브러리 간단한 사용법

 

설치

npm i react-zoom-pan-pinch

 

사용법

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

const ZoomInOut = () => {
  return (
    <TransformWrapper initialScale={1} minScale={1} maxScale={5} >
        <TransformComponent >
            <figure>
                <img src='/img/zoomInOutTest.png' />
          </figure>
        </TransformComponent>
    </TransformWrapper>
  );
};

export default ZoomInOut;

 

 

---

참고 자료 : https://www.npmjs.com/package/react-zoom-pan-pinch