react-swipeableを使ってページの座標を取得する

reactにはreact-swipeableという座標取得に特化したライブラリがあります。

左右上下にスワイプした時はもちろん、スワイプに関するオプションも用意されており

ドキュメントも豊富なのでこれまでJqueryでないと敷居の高かった

座標取得も楽にこなすことができます。

実装するには、まずnpmからライブラリをインストールします。

 npm i react-swipeable

インストールできたら任意のhtmlを<Swipeable>タグで囲みます。

swipedRight(e) {
    //座標が100以上の場合スワイプ遷移
    if(e.absX > 100){
      this.props.backPage();
    }
  }

render() {
  return (
    <Swipeable
        onSwipedRight={this.swipedRight}>
          <div id="box">
          </div>
    </Swipeable>
  }
}

上記の例では、onSwipedRightという右にスワイプをしたときに指の座標がどこに

あるかを教えてくれる関数を実装しています。

absはスワイプして指を離すまでの距離のことで、これが100を超える。つまり長い間

右にスワイプをすると前ページに戻るようになっています。

単純なページであればこのライブラリでスワイプ制御が簡単にできます。

テーブルでもセル一つ一つにスワイプ機能を実装できたら面白そう。