【React】react-swipeableライブラリを使用してスワイプイベントを取得する

スマホ向けのWebアプリで、右にスワイプしたか左にスワイプしたかなど指で操作する際のイベントを取得したい時に使用したライブラリを紹介します。

最初スマホのタッチジェスチャーを実装する際に検索で引っかかったライブラリは「Hammer.js」でした。
しかしHammer.jsはGitHubの更新が2019年5月で止まっておりちょっと古すぎるかなと思い断念

今回は色々調べてて良さそうだなと思ったreact-swipeableを使用することにしました。

react-swipeableをインストールする

npm i react-swipeable

react-swipeableを使ってみる

公式ドキュメントを参照するとわかりますが用意されているメソッドも直感的で使いやすい印象を受けました

import { useSwipeable } from "react-swipeable";
const HogeHoge: React.FC = () => {
    const handlers = useSwipeable({
        onSwiped: (event) => {
            console.log(event);
            if (event.dir == "Left") {
                //左にスワイプしたときに発火するイベント
                //hogehoge()
            }
            if (event.dir == "Right") {
                //右にスワイプしたときに発火するイベント
                //hogehoge
            }
        },
        trackMouse: true, //マウス操作でのスワイプを許可する場合はtrue
    });

    return (
        <div {...handlers}>
          //このタグ内はスワイプのイベントが取得できる
        </div>
    );
};

export default HogeHoge;

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。