【React】React Zoom Pan Pinch を使ってみた

はじめに

この記事では、React 用の Zoom / Pan / Pinch ライブラリである React Zoom Pan Pinch の利用手順を記載します。

開発環境

開発環境は以下の通りです。

• Windows 11
• React 18.3.1
• TypeScript 5.5.3
• React Zoom Pan Pinch 3.6.1

インストール

まずは以下のコマンドでインストールします。

npm install --save react-zoom-pan-pinch

基本的な利用方法

TransformWrapper と TransformComponent で Zoom / Pan / Pinch したい対象を囲むと実現できます。

以下の例では、img タグを囲んでいます。

sample.tsx

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

export const ZoomPanPinch: FC = () => {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src="./snowman.jpg" alt="snowman" />
      </TransformComponent>
    </TransformWrapper>
  );
};

動作確認をします。

Zoom / Pan / Pinch の対象

img タグ以外も Zoom / Pan / Pinch することができます。

テキスト

sample.tsx

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

export const ZoomPanPinch: FC = () => {
  return (
    <TransformWrapper>
      <TransformComponent>
        <h1>Zoom Pan Pinch</h1>
      </TransformComponent>
    </TransformWrapper>
  );
};

SVG

sample.tsx

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

export const ZoomPanPinch: FC = () => {
  return (
    <TransformWrapper>
      <TransformComponent>
        <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
          <image href="./snowman.jpg" width="600" height="400" />
        </svg>
      </TransformComponent>
    </TransformWrapper>
  );
};

参考

• React Zoom Pan Pinch