swipeable-react

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