A tiny single-finger tap and swipe library. Works with touch and/or mouse events. 700 bytes gzipped.
npm i rosin --save
import rosin from "rosin";
const swiper = rosin(document.body);Emitted values are relative to the DOM node you instantiated on.
swiper.on("tap", ({ x, y }, e) => {});
swiper.on("mouseup", ({ x, y }, e) => {});
swiper.on("mousedown", ({ x, y }, e) => {});
/** Fired once on each swipe */
swiper.on("left", ({ x, y }, e) => {});
swiper.on("right", ({ x, y }, e) => {});
swiper.on("up", ({ x, y }, e) => {});
swiper.on("down", ({ x, y }, e) => {});Drag events emit a different payload. It looks like this:
{
ix, // initial X coordinate
iy, // initial Y coordinate
dx, // delta (change) in X coordinate
dy, // delta (change) in Y coordinate
x, // current X coordinate
y, // current Y coordinate
}
/** Fired on every animation frame */
swiper.on("drag", (coords, e) => {});
swiper.on("dragLeft", (coords, e) => {});
swiper.on("dragRight", (coords, e) => {});
swiper.on("dragUp", (coords, e) => {});
swiper.on("dragDown", (coords, e) => {});Each emitter also returns a function to destroy itself:
const tapListener = swiper.on("tap", () => {});
tapListener(); // destroy listenerTo destroy the entire instance:
swiper.destroy();MIT License © Eric Bailey
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent