swipeable-react

    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

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

    Install

    npm i swipeable-react

    DownloadsWeekly Downloads

    18

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    13.9 MB

    Total Files

    17

    Last publish

    Collaborators

    • avatar