【React】指定した要素をピンチで拡大・縮小できるライブラリ「react-zoom-pan-pinch」

最終的に実装は見合わせたのですが、とても使いやすいライブラリだったのでご紹介。
「react-zoom-pan-pinch」という、指定した要素をピンチで拡大・縮小できるライブラリです。
勿論、マウスのホイール操作でも拡大率を変更できます。

GitHub のページはこちらから。

prc5/react-zoom-pan-pinch: React library to support easy zoom, pan, pinch on various html dom elements like images and divs
https://github.com/prc5/react-zoom-pan-pinch

デモページへのリンクもありますので、実装前に挙動を確認したい方はそちらも参考にして下さい。

ライブラリのインストールは下記のコマンドで行います。

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

サンプルコードは下記のとおりです。

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

class Example extends Component {
  render() {
    return (
      <TransformWrapper>
        <TransformComponent>
          {/* 拡大・縮小したい要素を追加 */}
        </TransformComponent>
      </TransformWrapper>
    );
  }
}

最低限のコードは上記のとおりです。
こちらを実行すると、<TransformComponent> で囲った要素を拡大・縮小することができます。

なお、拡大縮小の操作をボタンで行いたい場合は、下記のようにします。

<TransformWrapper
  initialScale={1}
  initialPositionX={0}
  initialPositionY={0}>
  {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
    <div>
      <div className="tools">
        <button onClick={() => zoomIn()}>拡大</button>
        <button onClick={() => zoomOut()}>縮小</button>
        <button onClick={() => resetTransform()}>リセット</button>
      </div>
      <TransformComponent>
        {/* 拡大・縮小したい要素を追加 */}
      </TransformComponent>
    </div>
  )}
</TransformWrapper>

5行目で取得できる zoomIn()、zoomOut()、resetTransform() 関数を実行すると、それぞれ拡大、縮小、倍率のリセットができます。
上記では 8～10 行目のようにボタンを追加し、クリックされたときにそれぞれの関数が呼び出されるようにしています。

実装した感想としては、とにかく簡単でした！
他のライブラリも試してみたのですが、これが一番実装が楽で、わかりやすかったです。
特にこだわりがないのであれば、まずこちらのライブラリを試してみてもいいと思います。

以上、React で指定した要素をピンチ or マウスホイールで拡大・縮小できるライブラリ「react-zoom-pan-pinch」についてでした。
ご参考になれば幸いです。