【react】react-swipeableでスワイプを追跡する

お題

react-swipeableを使ってスワイプした座標を取得する

ネイティブアプリではスワイプを検知する機能を使ってカルーセルを作ったりスワイプした

タイミングでページ遷移をすることができますが、reactでも「react-swipeable」を使って

スワイプした座標を取得することができます。

react-swipeableでできること

任意の方向でスワイプした時に何らかの処理を追加することができる

デルタ(スワイプ時の座標)を取得してその値によってアプリに制御を加えることができる。

導入方法

フックを使わない場合

npm i react-swipeable@4.3.0

実装方法

import React, { Component } from 'react';
import Swipeable from 'react-swipeable'
 
class SwipeComponent extends extends Component {
 
 constructor(props) {
    super(props);
    this.swipingLeft = this.swipingLeft.bind(this);
    this.swipedLeft = this.swipedLeft.bind(this);
    this.swipingRight = this.swipingRight.bind(this);
    this.swipedRight = this.swipedRight.bind(this);
 }
 
  swipingLeft(e, absX) {
    console.log("左スワイプ中", e, absX)
  }
 
  swipedLeft(e, deltaX, deltaY, isFlick, velocity) {
    console.log("左スワイプ終了", deltaX)
  }
 
  swipingRight(deltaX) {
    console.log("右スワイプ中", e, deltaX)
  }

  swipedRight(deltaX) {
    console.log("右スワイプ完了", e, deltaX)
  }
 
  render() {
    return (
      <Swipeable
        onSwipingLeft={this.swipingLeft}
        onSwipedLeft={this.swipedLeft}
        onSwipingRight={this.swipingRight}
        onSwipedRight={this.swipedRight} >
          //囲みたいコンポーネント
      </Swipeable>
    )
  }
}

モバイルアプリは左右スワイプのほうがよく使うイメージだったのでそれを意識ししました。

これを使ってマップを表示している時にスワイプを検知した場合そのタイミングのみスワイプを

無効化したりページ遷移の時にカルーセルを動かせなくすることができます。

なお、これはフックを使っていません。

フックを使ったスワイプ追跡をしたい場合は以下のコマンドを打ち込んでください。

npm install --save react-swipeable

最新バージョンへのリンク↓

https://www.npmjs.com/package/react-swipeable