2.0.0 • Public • Published

    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


    yarn add swipeable-react


    import Swipeable from "swipeable-react";
    function YourOwnComponent(props) {
      return (
          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!

    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


    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.


    • 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.


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

    nvm use

    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


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


    Non-react swiped-events by John Doherty

    Product card design by Virgil Pana


    MIT License


    npm i swipeable-react

    DownloadsWeekly Downloads






    Unpacked Size

    13.9 MB

    Total Files


    Last publish


    • avatar