[React] image 마우스 wheel 로 zoom In/Out 하기 (라이브러리 사용)

react-zoom-pan-pinch  라이브러리 사용하여 스크롤로 이미지를 확대/축소 하는 기능

https://www.npmjs.com/package/react-zoom-pan-pinch

 

 

리액트로 이미지를 확대 축소하는 많은 라이브러리들이 있지만

 

비교적 사용이 쉽고 

최근(대략 8개월) 전에 업그레이드도 진행된 편

 

(다른라이브러리들은 3-4년전 이 마지막 업데이트 현 리액트버전과 맞지 않은 경우도 있었다)

 

😎install

npm i react-zoom-pan-pinch

 

 

 

😎 import

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

 

 

😎 code

<TransformWrapper initialScale={1} minScale={1} maxScale={10} >
    <TransformComponent >
        <figure>
            <img src='/images/whiteBg.png' />
      </figure>
    </TransformComponent>
</TransformWrapper>

 

이미지를 감싸주기만 하면 줌 인/아웃 가능

https://prc5.github.io/react-zoom-pan-pinch/?path=/story/docs-props--page

 

위 링크 : 해당라이브러리에 관한 옵션값도 정리가 잘되었다.

 

initialScale={1} 

첫화면 랜더링시, 확대 디폴트 값을 1로 설정

minScale={1}                      maxScale={10}

최소 축소 는 1 배

최대 확대는 10배로 설정해주었다.

 

디폴트는 1 : 8

 

 

마우스 스크롤시,

지정된 박스 안에서 해당 이미지가 확대/ 축소된다

확대/축소 된 상태에서 마우스 드래그 시 위치 이동도 가능하다.