React component to enable swiping in mobile browsers

What you could use it for

Live mobile demo!

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.

Requirements ✅

Swipeable has been rewritten using React hooks ↩ as per v2.0.0.

In order to work properly any consumer project should have version of react >= 16.8.0 (when hooks were introduced officially).

If hooks are not an option try Swipeable v1.3.0 which is using classes and depends on react >= 15.5.0.

Development

The code is built on node v10.15.1. Set as default in .nvmrc for nvm users.

nvm use
yarn

Tests run in jest --watch mode:

yarn test

Deploying by:

yarn build

That will create a lib/ folder with index.js file containing transpiled code from the src/Swipeable.js component

Contributing

Contribution is always welcome in the form of new features, bug fixes, ideas or simply tweating about Swipeable. Check the relavant guides here.

Credits

Non-react swiped-events by John Doherty

Product card design by Virgil Pana

License

MIT License