Skip to content
/ swipeable-react Public template

Simple react component for swipe events on touch 📲

License

Notifications You must be signed in to change notification settings

moubi/swipeable-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation



React component to enable swiping in mobile browsers

moubi Language grade: JavaScript moubi moubi moubi

What you could use it for

A preview of what can be achieved with swipeable-react

Live mobile demo!

Edit Swipeable product card

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

A preview what swipeable-react is for

Live mobile demo!

Edit Swiping views

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 tweeting about Swipeable. Check the relevant guides here.

Credits

Non-react swiped-events by John Doherty

Product card design by Virgil Pana

License

MIT License