2.0.0 • Published 4 years ago

swipeable-react v2.0.0

Weekly downloads
16
License
MIT
Repository
github
Last release
4 years ago

React component to enable swiping in mobile browsers

moubi Language grade: JavaScript moubi moubi moubi

What you could use it for

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

Live mobile demo!

Edit Swiping views

API

PropTypeDefaultDescription
childrenfunctionFunction that passes the ref down to the DOM element which will get touch events attached to.
minDistancenumber20min distance in px between touchstart and touchend
maxDistancenumberInfinitymax distance in px between touchstart and touchend
timeoutnumber500the time in ms between touchstart and touchend
onSwipeLeftfunctionhandler for successful swipe left
onSwipeRightfunctionhandler for successful swipe right
onSwipeUpfunctionhandler for successful swipe up
onSwipeDownfunctionhandler 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

2.0.0

4 years ago

1.3.0

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago