Swipeable-react NPM

React component to enable swiping in mobile browsers

What you could use it for

Install

yarn add swipeable-react

Usage

import Swipeable from "swipeable-react";
...

function YourOwnComponent(props) {
  return (
    <Swipeable
      onSwipeLeft={() => { console.log("swiped left"); }}
      onSwipeRight={() => { console.log("swiped right"); }}
      onSwipeUp={() => { console.log("swiped up"); }}
      onSwipeDown={() => { console.log("swiped down"); }}
    >
      {innerRef => (
        <div ref={innerRef}>
          I will detect swiping!
        </div>
      )}
    </Swipeable>
  );
}

Then it's up to you on how to react on these swiping events.

Basic example

Sliding on horizontal/vertical swipe

Live mobile demo!

API

Prop	Type	Default	Description
children	function		Function that passes the ref down to the DOM element which will get touch events attached to.
minDistance	number	20	min distance in px between touchstart and touchend
maxDistance	number	Infinity	max distance in px between touchstart and touchend
timeout	number	500	the time in ms between touchstart and touchend
onSwipeLeft	function		handler for successful swipe left
onSwipeRight	function		handler for successful swipe right
onSwipeUp	function		handler for successful swipe up
onSwipeDown	function		handler for successful swipe down

* All props are optional except the children.

Notes

Supports both vertical and horizontal swiping.
Uses touchstart, touchmove and touchend events
Multiple nested Swipeables are supported.
In the last scenario successful nested swipe will prevent triggering parent swipeables. That is done by calling stopPropagation() inside touchend handler.