leandrowd/react-easy-swipe

Easy handler for common swipe operations

REACT EASY SWIPE

Add swipe interactions to your react component.

• Generated using react-init

Demo

http://leandrowd.github.io/react-easy-swipe/

• Open your console;
• Swipe over the content and check your console;
• This is a touch component so make sure your browser is emulating touch.

Tips:

1. To prevent scroll during swipe, return true from the handler passed to onSwipeMove

2. To allow mouse events to behave like touch, pass a prop allowMouseEvents

3. To prevent accidental swipes on scroll, pass a prop tolerance with the tolerance pixel as number.

Instalation

npm install react-easy-swipe --save

Usage

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Swipe from 'react-easy-swipe';

class MyComponent extends Component {
  onSwipeStart(event) {
    console.log('Start swiping...', event);
  }

  onSwipeMove(position, event) {
    console.log(`Moved ${position.x} pixels horizontally`, event);
    console.log(`Moved ${position.y} pixels vertically`, event);
  }

  onSwipeEnd(event) {
    console.log('End swiping...', event);
  }

  render() {
    const boxStyle = {
      width: '100%',
      height: '300px',
      border: '1px solid black',
      background: '#ccc',
      padding: '20px',
      fontSize: '3em'
    };

    return (
      <Swipe
        onSwipeStart={this.onSwipeStart}
        onSwipeMove={this.onSwipeMove}
        onSwipeEnd={this.onSwipeEnd}>
          <div style={boxStyle}>Open the console and swipe me</div>
      </Swipe>
    );
  }
}

ReactDOM.render(<MyComponent/>, document.getElementById('root'));

Properties

{
  tagName: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
  children: PropTypes.node,
  allowMouseEvents: PropTypes.bool,
  onSwipeUp: PropTypes.func,
  onSwipeDown: PropTypes.func,
  onSwipeLeft: PropTypes.func,
  onSwipeRight: PropTypes.func,
  onSwipeStart: PropTypes.func,
  onSwipeMove: PropTypes.func,
  onSwipeEnd: PropTypes.func,
  tolerance: PropTypes.number.isRequired
}

Contributing

Please, feel free to contribute. You may open a bug, request a feature, submit a pull request or whatever you want!

License

react-easy-swipe's Issues

Support react 18

There is no children in React.Component in React 18. Need to define children manually in the SwipeProps https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc

The engine "node" is incompatible with this module. Expected version ">= 6.9.5"

When installing react-responsive-carousel I am getting an error from yarn and the package does not install because of this dependency has a higher requirement for node.

$ yarn add react-responsive-carousel
yarn add v0.23.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 6.9.5".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

The question is: is it really necessary? I don't really want to change the version of node...

Broken link to incorrect GitHub repository on demo page

On the demo page of http://react-easy-swipe.js.org/, there's a "Fork me on GitHub" link located at the upper right corner. However, it currently redirects to your other project's GitHub repository at https://github.com/leandrowd/react-responsive-carousel instead of this specific repository.

Warning for list item keys by nextjs/reactjs apps

Hello,
I encountered an issue using this very beautiful component on my nextjs app.
It looked something like this:

Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using . See https://reactjs.org/link/warning-keys for more information.

Seems to have something to do with line 78 to 82 of your index.html file.
Not very sure though.

Binding function to this??

I need to be able to access the context and thus I am trying to bind my function to "this". In the swipe component how can I do this. I need to be able to access state and setState, some pretty common objects within react components. Here is a piece of incomplete code below:

class Carousel extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 3,
current: 0,
active: 0
};

this.onSwipeLeft = this.onSwipeLeft.bind(this);
this.onSwipeRight = this.onSwipeRight.bind(this);

}

slide(i) {
this.setState(...this.state,{ active: i});
}

onSwipeLeft(event) {

console.log('Swipe left...', event);
console.log('this', parseInt(this.children.key) + 1);
this.slide(parseInt(this.children.key) + 1);

}

Fix StrictMode warning

Using React.StrictMode is throwing this warning:

findDOMNode is deprecated in StrictMode. findDOMNode was passed 
an instance of ReactSwipe which is inside StrictMode. Instead, add a 
ref directly to the element you want to reference.

Should be fixed to allow Concurrent mode in the future React releases.

In order to fix it: The ref should be under React.createRef

If component is wrapped with `react-contextmenu`, swipe events don't work properly

I wrapped my whole layout like so:

<Swipe
    onSwipeLeft={() => this.handleSwipe('left')}
    onSwipeRight={() => this.handleSwipe('right')}
>
      <MYLAYOUT />
</Swipe>

GOOD BEHAVIOR

Anywhere I swipe I get nice events. If I would have used onSwipeMove prop instead, it would call its handle function for every position change.

BAD BEHAVIOR

However, neither of these works if component over which swipe happened is wrapped with component from library react-contextmenu. Only start and end events would be triggered.
What could be causing this issue? react-contextmenu is lib for adding right click functionality to the component.
I can provide minimal demo if needed for further investigation.

Missing license file

While package.json declares the license as MIT, there is no actual license file in the project.

Swipe Top triggered when swiping right

Hi,

I am trying to use this component, I used the onSwipeLeft and onSwipeRight commands and it works well, but then I saw a weird behavior, when I swiped up or down it will still trigger left and right. Is there any way to make it only trigger when swiping left or right?

Thanks a lot for your help

Requst no NPM update

Some issues have been fixed with last commits in the repository.
@leandrowd can you please publish a new version to NPM?

Module build failed: ReferenceError: Unknown plugin "transform-es2015-modules-umd"

If I do a npm install on a project that lists "react-easy-swipe" as a dependency, npm run build fails with:

ERROR in ./~/react-easy-swipe/lib/index.js
Module build failed: ReferenceError: Unknown plugin "transform-es2015-modules-umd" specified in "C:\\Project\\node_modules\\react-easy-swipe\\.babelrc"

Manually deleting the .babelrc file inside node_modules/react-easy-swipe/ does serve as a work-around so this isn't strictly speaking a blocking issue.

I believe a similar error was experienced in the following project, which outlines how they managed to resolve it by not publishing the .babelrc file to npm.

developit/preact-redux#19

Move React to devDependencies.

Could you move react to devDependencies? I'm using react 0.14.7 and if I try installing this package it crashes and tells me it couldn't install the dependency and somehow react gets erased from my node_modules. Since it's a React Component, can't we just let it be an implicit dependency?

[NOT ISSUE] Bad Link for "Fork me on github" banner

Heads up, the site https://react-easy-swipe.js.org/ links to a different repo (a carousel) through the "fork me on github" banner in the top right.

This happens to me all the time because I'm constantly preoccupied with current code or new ideas. Great minds ( ;

Thanks for a simple swiping library! I was about to make one but instead I'm going to support yours.

Missing dependency on React

As reported by https://bundlephobia.com/[email protected]

MissingDependencyError

This package (or this version) uses react, but does not specify them either as a dependency or a peer dependency

is there a way to disabled touchEvt on some element

Hi Dear is there a way to disabled touchEvt on some element by a "className" or some one else. In my code I have a fullpage that use swipe but into Article component I have an a touch carouel. And when I get swipe on carouse right also trigger on parent Swipe component.

thanks in advanced

<Swipe onSwipeRight={this.onSwipeRight} tolerance={swipeComponent.tolerance}>
    <Article/>
    {(configLayout.home[6].status) && <FooterContainer/>}
</Swipe>

Additional attributes

Thanks for the component! Could you make it possible to add additional HTML attributes to the tag other than class and style?

Cancel or ignore specific directional swipes

We're using react-easy-swipe to implement a carousel in our app, to much success, but on a mobile phone if the carousel takes up most of the height of the screen, the user can't swipe to get below the carousel (or swipe-able area, to be more generic) because the library eats that swipe event and doesn't propagate.

I'd like to be able to specify certain directions to include or exclude, or have the ability to cancel handling a swipe event based on my own determination, so the browser can handle it and continue moving the page.

You can reproduce the issue by opening your demo page on your phone or using the Chrome Dev Tools to mimic a mobile device. swipe to scroll the demo area into view and then try to swipe within the demo area to continue further down the page. It will trap the swipe event (writing it out to the console) but doesn't provide a way to ignore it.

.

.

Component doesn't swipe when wrapped with <Swipe>

Hi there,

My render looks like this:

 return (<Swipe >
          <div className="screen" >        
          <div  className="bg2" style={{height: newPageHeight+"px"}}>         
             
</div>
        <div className="screendimmer1" >
</div>
        <div className="image23" style={{top: infoButtonTopValue+"px"}} onClick={this.showPopup}></div>
        <div className="answers" style={{ top: "291.00px"}}>{
                choices.map( (item, index) =>{
                        return (<Answer key={index} returnAnswer={this.returnAnswer} item={item} index={index} totalCount={choices.length} />)
                }

                )
        }            
</div>
        <div className="question">{this.props.questionText}</div>
        <div className={"iconavatarplaceholder "+this.props.avatarClass} style={{top:avatarIconTopValue+"px"}}></div>

        <div className={"popup " + visibilityClass}>            
			<div  className={"screendimmer1 " + visibilityClass}>                
				<div className="rectangle12"></div>
			</div>
            <div  className={"rectangle20 " + visibilityClass}></div>
            <div className={"popuptext " + visibilityClass}>{this.props.popupInfo}</div>
            <div  className={"closex " + visibilityClass} onClick={this.hidePopup}></div>
		</div>
</div>
</Swipe>);

I have installed the component and imported it up top as per the documentation. However, the component does not swipe away when I try to swipe it left or right from my iphone 12 while running it on localhost.

Edit: The events work when I attach them. However, the component doesn't actually swipe left or right.

Error "Ignored attempt to cancel a touchmove event"

On mobile device, while scrolling this error is thrown:

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

This could be fixed replacing the following line

react-easy-swipe/src/react-swipe.js

Line 152 in 0a7e471

if (shouldPreventDefault) {

with

if (shouldPreventDefault && event.cancelable) {
  event.preventDefault();
}

Warning: Unable to preventDefault inside passive event listener due to target being treated as passive

SwipeUp call's SwipeLeft

Why SwipeUp call's SwipeLeft and SwipeDown calls SwipeRight ??? How to fix that???

Feature request: add disabled prop

Currently we have implemented a wrapper to achieve this functionality, but it would be great to have native support for this.

import React                from 'react';
import ReactEasySwipe       from 'react-easy-swipe';


export default function Swiper({
    onSwipeLeft,
    onSwipeLeftDisabled,
    onSwipeRight,
    onSwipeRightDisabled,
    ...rest
}) {
    return (
        <ReactEasySwipe
            { ...rest }
            onSwipeLeft={ onSwipeLeftDisabled ? undefined : onSwipeLeft }
            onSwipeRight={ onSwipeRightDisabled ? undefined : onSwipeRight }
        />
    );
}

Custom components for Swipe container

Currently, we can customize the tagname attribute of our swipe component, which is nice. Nevertheless, this only works for react native components like div or li. If only this rule could be modified and it could accept also react components instead of strings, we could add the swipe functionality to our custom awesome components.
Also that could be remove this side effect , because this library is adding their attributes to a native div component by default, so react easy swipe is generating a div with onSwipeLeft, tolerance, etc. as DOM attributes, which is throwing a lot of warnings.

Fix doc

import Swipe from './react-swipe';
Module not found: Error: Can't resolve './react-swipe' in ' ................

Change on
import Swipe from 'react-easy-swipe';

target

How can I get event.target onSwipeLeft (for example)?
I have to handle swipes depends on targets in my project.

Issue with Preact

I try it with Preact, but it looks that it doesn't work!

CodeSandbox: https://codesandbox.io/s/preact-carousel-xvk95

Allow scroll under swipe

I have an scrollable list, and above it I use react-easy-swipe to open and close a menu.
For that I have a invisible piece of the menu to listen the swipe left or right.

My problem is that doing this the scroll up and down of the list dont work in the menu's area.

Is there any way to allow the scroll?

Can we add mouse support?

This package is really useful, but it would be great if the swipe also worked on desktop too.

[NOT ISSUE] - Adding threshold to onSwipeDirection?

Is it possible to add a threshold value to a onSwipeRight?

Or do we need to use onSwipeMove and then have a conditional to achieve the same effect?

Many thanks, great package!

Refs

I don't know how volatile this is, but you can do a ref call back like this.

<Swipe ref={ref => this._swiper = ref.swiper}>

Sounds like a helpful thing to put on the docs.

react-easy-swipe typescript declaration file

Add tolerance to swipe movements

If the movement is not greater than the tolerance, don't call the handlers.

Documentation has an error...

http://react-easy-swipe.js.org/ says to

import Swipe from './react-swipe';

Shouldn't that say

import Swipe from './react-easy-swipe'; ?

Set default capture: false

react-easy-swipe/src/react-swipe.js

Line 16 in e016d64

return supportsCaptureOption ? options : options.capture;

Maybe if not supportsCaptureOption you need return capture false, because now always return true.

return supportsCaptureOption ? options : false;