スマホ向けのWebアプリで、右にスワイプしたか左にスワイプしたかなど指で操作する際のイベントを取得したい時に使用したライブラリを紹介します。
最初スマホのタッチジェスチャーを実装する際に検索で引っかかったライブラリは「Hammer.js」でした。
しかしHammer.jsはGitHubの更新が2019年5月で止まっておりちょっと古すぎるかなと思い断念
今回は色々調べてて良さそうだなと思ったreact-swipeableを使用することにしました。
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;
関連記事
