# swipe-event-listener

> Low level, zero-dependency, minimal swipe event implementation for web.

Latest version **1.2.1** (published 2021-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install swipe-event-listener
pnpm add swipe-event-listener
yarn add swipe-event-listener
bun add swipe-event-listener
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2021-02-01 |
| First published | 2020-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Stan Georgian |
| Maintainers | georgianstan |
| Keywords | swipe, swipe touch, swipe mouse, swipe event |

## Links

- npm: https://www.npmjs.com/package/swipe-event-listener
- Repository: https://github.com/GeorgianStan/swipe-event-listener
- Issues: https://github.com/GeorgianStan/swipe-event-listener/issues
- npm.io page: https://npm.io/package/swipe-event-listener

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.2.1 (latest) — 2021-02-01
- 1.2.0 — 2020-12-17
- 1.0.3 — 2020-05-23
- 1.0.2 — 2020-05-22
- 1.0.1 — 2020-05-21
- 1.0.0 — 2020-05-21

## README

# Swipe Event Listener

swipe-event-listener is a very minimal library that allows listening for swipe gesture, including the ones from the mouse from any DOM element.
Once invoked with a DOM element, simply listen for swipe events.

## Installation

### Browser

```html
<script src="https://unpkg.com/swipe-event-listener@1.2.1/dist/swipe-event-listener.js"></script>
```

Then anywhere in your JavaScript code.

```javascript
const { SwipeEventListener } = window.SwipeEventListener;
```

OR

```javascript
const SwipeEventListener = window.SwipeEventListener.SwipeEventListener;
```

### Via NPM

```bash
npm i swipe-event-listener
```

Then anywhere in your code.

```javascript
import { SwipeEventListener } from 'swipe-event-listener`
```

OR

```javascript
const SwipeListener = require('swipe-listener');
```

## How to use it

```javascript
const { swipeArea, updateOptions } = SwipeEventListener({
  swipeArea: document.querySelector('body'),
});

swipeArea.addEventListener('swipeDown', () => {
  console.log('swipe down');
});
swipeArea.addEventListener('swipeUp', () => {
  console.log('swipe up');
});

swipeArea.addEventListener('swipeLeft', () => {
  console.log('swipe left');
});

swipeArea.addEventListener('swipeRight', () => {
  console.log('swipe right');
});
```

## Configuration options

```typescript
const SwipeEventListener: (
  customOptions: Options,
) => {
  swipeArea: HTMLElement;
  updateOptions: (newOptions: Options) => void;
};
```

| Option               | Required | Type        | Default   | Description                                                                                                  |
| -------------------- | -------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------ |
| swipeArea            | **yes**  | HTMLElement | undefined | The container where the swipe event can take place.                                                          |
| swipeSensitivity     | no       | number      | 80        | Swipe sensitivity in pixels. Across how many pixels does the cursor need to move to trigger the swipe event. |
| isSwipeUpDesired     | no       | boolean     | yes       | Enable swipeUp event.                                                                                        |
| isSwipeDownDesired   | no       | boolean     | yes       | Enable swipeDown event.                                                                                      |
| isSwipeLeftDesired   | no       | boolean     | yes       | Enable swipeLeft event.                                                                                      |
| isSwipeRightDesired  | no       | boolean     | yes       | Enable swipeRight event.                                                                                     |
| listenForMouseEvents | no       | boolean     | yes       | Enable swipe event using mouse event.                                                                        |
| listenForTouchEvents | no       | boolean     | yes       | Enable swipe event using touch events (used for mobile).                                                     |

## Returned values

```typescript
const SwipeEventListener = (customOptions: Options): SwipeEventListene => {...}
```

```typescript
export interface SwipeEventListener {
  swipeArea: HTMLElement;
  updateOptions: (newOptions: Options) => void;
}
```

- **swipeArea** - the same HTMLElement passed as argument
- **updateOptions** - used to update all the options listed above

## Typescript ready

Types are included and are available for importation.

`swipe-event-listener.d.ts`

```typescript
export interface Options {
  swipeSensitivity: number;
  isSwipeUpDesired: boolean;
  isSwipeDownDesired: boolean;
  isSwipeLeftDesired: boolean;
  isSwipeRightDesired: boolean;
  listenForTouchEvents: boolean;
  listenForMouseEvents: boolean;
  swipeArea: HTMLElement;
}
export declare enum CustomSwipeEvents {
  swipeUp = 'swipeUp',
  swipeDown = 'swipeDown',
  swipeLeft = 'swipeLeft',
  swipeRight = 'swipeRight',
}
export declare const SwipeEventListener: (
  customOptions: Options,
) => {
  swipeArea: HTMLElement;
  updateOptions: (newOptions: Options) => void;
};
```

## Authors

- Stan Georgian - https://georgianstan.ro

## License

This project is licensed under the MIT License

## [Changelog](https://github.com/GeorgianStan/swipe-event-listener/blob/master/CHANGELOG.md)

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