# react-easy-swipe

> React easy swipe - Easy handler for common touch operations

Latest version **0.0.23** (published 2023-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-easy-swipe
pnpm add react-easy-swipe
yarn add react-easy-swipe
bun add react-easy-swipe
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.23 |
| Published | 2023-01-25 |
| First published | 2016-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 6 |
| Dependencies | 1 |
| Unpacked size | 190.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 102 |
| Author | Leandro Augusto Lemos |
| Maintainers | leandrowd |
| Keywords | React swipe, React easy swipe, React touch, react-swipe, react-easy-swipe, react-touch, react-component, Mobile, Swipe, Touch |

## Links

- npm: https://www.npmjs.com/package/react-easy-swipe
- Repository: https://github.com/leandrowd/react-easy-swipe
- Homepage: http://leandrowd.github.io/react-easy-swipe/
- Issues: https://github.com/leandrowd/react-easy-swipe/issues
- npm.io page: https://npm.io/package/react-easy-swipe

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.0.23 (latest) — 2023-01-25
- 0.0.22 — 2021-07-02
- 0.0.21 — 2020-09-23
- 0.0.20 — 2020-09-23
- 0.0.19 — 2020-09-23
- 0.0.18 — 2019-06-12
- 0.0.17 — 2018-10-24
- 0.0.16 — 2018-05-21
- 0.0.15 — 2018-05-20
- 0.0.14 — 2018-04-24
- 0.0.13 — 2017-05-11
- 0.0.12 — 2017-04-30
- 0.0.11 — 2017-04-26
- 0.0.10 — 2017-04-19
- 0.0.8 — 2017-02-05
- … 7 more at https://npm.io/package/react-easy-swipe/versions

## README

# REACT EASY SWIPE
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-easy-swipe.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-easy-swipe?ref=badge_shield)


Add swipe interactions to your react component.
* Generated using [react-init](https://www.npmjs.com/package/react-init)

## Demo
[http://leandrowd.github.io/react-easy-swipe/](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
```javascript
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

```javascript
{
  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
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-easy-swipe.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-easy-swipe?ref=badge_large)

---
_Source: https://npm.io/package/react-easy-swipe · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._