スマホ向けのWebアプリで、右にスワイプしたか左にスワイプしたかなど指で操作する際のイベントを取得したい時に使用したライブラリを紹介します。
最初スマホのタッチジェスチャーを実装する際に検索で引っかかったライブラリは「Hammer.js」でした。
しかしHammer.jsはGitHubの更新が2019年5月で止まっておりちょっと古すぎるかなと思い断念
今回は色々調べてて良さそうだなと思ったreact-swipeableを使用することにしました。
Contents
react-swipeableをインストールする
npm i react-swipeablereact-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;
react-swipeableのオプションとメソッド
イベントハンドラのプロパティ
以下のプロパティを利用することで、特定のスワイプジェスチャーに対するイベントハンドラを設定できます。
{
onSwiped, // 任意のスワイプ後 (SwipeEventData) => void
onSwipedLeft, // 左スワイプ後 (SwipeEventData) => void
onSwipedRight, // 右スワイプ後 (SwipeEventData) => void
onSwipedUp, // 上スワイプ後 (SwipeEventData) => void
onSwipedDown, // 下スワイプ後 (SwipeEventData) => void
onSwipeStart, // スワイプ開始時 (SwipeEventData) => void
onSwiping, // スワイピング中 (SwipeEventData) => void
onTap, // タップ後 ({ event }) => void
}設定オプションとデフォルト値
以下のプロパティを利用して、スワイプジェスチャーの検出と処理の設定をカスタマイズすることができます。
{
delta: 10, // スワイプが開始する前の最小距離 (px)
preventScrollOnSwipe: false, // スワイプ中のスクロールを防ぐ
trackTouch: true, // タッチ入力をトラックする
trackMouse: false, // マウス入力をトラックする
rotationAngle: 0, // 回転角を設定する
swipeDuration: Infinity, // スワイプの許容時間 (ms)
touchEventOptions: { passive: true }, // タッチイベントリスナーのオプション
}
サンプルコード
import { useSwipeable } from "react-swipeable";
const SwipeComponent: React.FC = () => {
const handlers = useSwipeable({
onSwipedLeft: () => console.log("Swiped left!"),
onSwipedRight: () => console.log("Swiped right!"),
delta: 10, // スワイプが開始する前の最小距離 (px)
preventScrollOnSwipe: true, // スワイプ中のスクロールを防ぐ
trackMouse: true, // マウス入力をトラックする
});
return (
<div {...handlers}>
You can swipe here
</div>
);
};
export default SwipeComponent;
このサンプルコードでは、delta オプションを利用してスワイプが開始する前の最小距離を 10px に設定しています。また、preventScrollOnSwipe オプションを true に設定することで、スワイプ中にページのスクロールを防止しています。さらに、trackMouse オプションを true に設定することで、マウス入力によるスワイプをトラックしています。
関連記事
