React component to handle swiping on touch

swipeable-react

React component to handle swiping on touch devices.

Install

yarn add --save swipeable-react

Usage

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

class YourOwnComponent extends Component {
  render() {
    return (
      <Swipeable
        onSwipeLeft={() => { console.log("swiped left"); }}
        onSwipeRight={() => { console.log("swiped right"); }}
      >
        {innerRef => (
          <div ref={innerRef}>
            I will detect swiping!
          </div>
        )}
      </Swipeable>
    );
  }
}

Notes

• Supports both vertical and horizontal swiping.
• Uses touchstart , touchmove and touchend events
• Multiple nested Swipeables are supported.

Note that in this scenario successful inner swipe will prevent parent swipeables. The preventing is done by calling stopPropagation() in the touchend handler.

API

* All props are optional except the children .

Development

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

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

Credits

Non-react swiped-events

License

MIT License