TouchKit
Use touch gestures in your web application.
TypeScript supported.
Install
npm
npm i @raphpare/touch-kit --save
Yarn
yarn add @raphpare/touch-kit
Examples
HTML
<div class="box">
...
</div>
TouchKit Class
import { TouchKit } from '@raphpare/touch-kit';
const touchKit = new TouchKit(refBox, {
tap: () => console.log('tap'),
touchhold: () => console.log('touchhold'),
move: () => console.log('move'),
swipe: () => console.log('swipe'),
swipeLeft: () => console.log('swipeLeft'),
swipeRight: () => console.log('swipeRight'),
swipeUp: () => console.log('swipeUp'),
swipeDown: () => console.log('swipeDown'),
});
const stopTouchKit = () => {
stopTouchKit.stop();
}
Functions
setTapEvent
import { setTapEvent } from '@raphpare/touch-kit';
const tapEvent = setTapEvent(
document.querySelector('.box'),
() => console.log('tap')
);
const stopTapEvent = () => {
tapEvent.stop();
}
setTouchholdEvent
import { setTouchholdEvent } from '@raphpare/touch-kit';
const touchholdEvent = setTouchholdEvent(
document.querySelector('.box'),
() => console.log('touchhold')
);
const stopTouchholdEvent = () => {
touchholdEvent.stop();
}
setMoveEvent
import { setMoveEvent } from '@raphpare/touch-kit';
const moveEvent = setMoveEvent(
document.querySelector('.box'),
() => console.log('move')
);
const stopMoveEvent = () => {
moveEvent.stop();
}
setStartEvent
import { setStartEvent } from '@raphpare/touch-kit';
const startEvent = setStartEvent(
document.querySelector('.box'),
() => console.log('start')
);
const stopStartEvent = () => {
startEvent.stop();
}
setEndEvent
import { setEndEvent } from '@raphpare/touch-kit';
const endEvent = setEndEvent(
document.querySelector('.box'),
() => console.log('end')
);
const stopEndEvent = () => {
endEvent.stop();
}
setSwipeEvent
import { setSwipeEvent } from '@raphpare/touch-kit';
const swipeEvent = setSwipeEvent(
document.querySelector('.box'),
() => console.log('swipe')
);
const stopSwipeEvent = () => {
swipeEvent.stop();
}
setSwipeLeftEvent
import { setSwipeLeftEvent } from '@raphpare/touch-kit';
const swipeLeftEvent = setSwipeLeftEvent(
document.querySelector('.box'),
() => console.log('swipeLeft')
);
const stopSwipeLeftEvent = () => {
swipeLeftEvent.stop();
}
setSwipeRightEvent
import { setSwipeRightEvent } from '@raphpare/touch-kit';
const swipeRightEvent = setSwipeRightEvent(
document.querySelector('.box'),
() => console.log('swipeRight')
);
const stopSwipeRightEvent = () => {
swipeRightEvent.stop();
}
setSwipeUpEvent
import { setSwipeUpEvent } from '@raphpare/touch-kit';
const swipeUpEvent = setSwipeUpEvent(
document.querySelector('.box'),
() => console.log('swipeUp')
);
const stopSwipeUpEvent = () => {
swipeUpEvent.stop();
}
setSwipeDownEvent
import { setSwipeDownEvent } from '@raphpare/touch-kit';
const swipeDownEvent = setSwipeDownEvent(
document.querySelector('.box'),
() => console.log('swipeDown')
);
const stopSwipeDownEvent = () => {
swipeDownEvent.stop();
}
Functions Parameters
Parameter | Type | Required |
---|---|---|
element | HtmlElement |
True |
callback | (event: TouchKitEvent) => void |
True |
options | TouchKitOptions |
False |