Hammer.js wrapper for Svelte to support some operation in the mobile.
This is directive of svelte for Hammer.js 2.x.
This is easy for using Hammer.js. It just use directive of svelte.
This library support Svelte >= 3.0. And use Hammer.js > 2.x.
npm install svelte-hammer
or
yarn add svelte-hammer
When this library use in rollup, you need some config:
// rollup.config.js
export default {
// ...
plugins: [
// ...
commonjs({
namedExports: { 'svelte-hammer': ['Hammer', 'pan', 'pinch', 'press', 'rotate', 'swipe', 'tap'] }
}),
// ...
]
}See Hammer.js documentation for all available events.
<script>
import { pan } from 'svelte-hammer'
</script>
<div
use:pan
on:panstart={({ detail }) => /* Pan Start */}
...
>
</div><script>
import svelteHammer from 'svelte-hammer'
</script>
<div
use:svelteHammer.pan
on:panstart={({ detail }) => /* Pan Start */}
...
>
</div>detail is hammer.js event object
You take choose one.
<script>
import { pan } from 'svelte-hammer'
</script>
<div
use:pan
on:panstart={({ detail }) => /* Pan Start */}
on:panmove={({ detail }) => /* Pan Move */}
on:panend={({ detail }) => /* Pan End */}
>
</div>on:pan: Detect all pan eventon:panstart: Detect start pan eventon:panmove: Detect move pan eventon:panend: Detect end pan eventon:pancancel: Detect cancel pan eventon:panleft: Detect left pan eventon:panright: Detect right pan eventon:panup: Detect up pan eventon:pandown: Detect down pan event
<script>
import { pinch } from 'svelte-hammer'
</script>
<div
use:pinch
on:pinchstart={({ detail }) => /* Pinch Start */}
on:pinchmove={({ detail }) => /* Pinch Move */}
on:pinchend={({ detail }) => /* Pinch End */}
>
</div>on:pinch: Detect all pinch eventon:pinchstart: Detect start pinch eventon:pinchmove: Detect move pinch eventon:pinchend: Detect end pinch eventon:pinchcancel: Detect cancel pinch eventon:pinchin: Detect in pinch eventon:pinchout: Detect out pinch event
<script>
import { press } from 'svelte-hammer'
</script>
<div
use:press
on:press={({ detail }) => /* Press */}
on:pressup={({ detail }) => /* Press Up */}
>
</div>on:press: Detect press eventon:pressup: Detect up press event
<script>
import { rotate } from 'svelte-hammer'
</script>
<div
use:rotate
on:rotatestart={({ detail }) => /* Rotate Start */}
on:rotatemove={({ detail }) => /* Rotate Move */}
on:rotateend={({ detail }) => /* Rotate End */}
>
</div>on:rotate: Detect all rotate eventon:rotatestart: Detect start rotate eventon:rotatemove: Detect move rotate eventon:rotateend: Detect end rotate eventon:rotatecancel: Detect cancel rotate event
<script>
import { swipe } from 'svelte-hammer'
</script>
<div
use:swipe
on:swipeleft={({ detail }) => /* Swipe Left */}
on:swiperight={({ detail }) => /* Swipe Right */}
on:swipeup={({ detail }) => /* Swipe Up */}
on:swipedown={({ detail }) => /* Swipe Down */}
>
</div>on:swipe: Detect all swipe eventon:swipeleft: Detect left swipe eventon:swiperight: Detect right swipe eventon:swipeup: Detect up swipe eventon:swipedown: Detect down swipe event
<script>
import { tap } from 'svelte-hammer'
</script>
<div
use:tap
on:tap={({ detail }) => /* Tap */}
>
</div>on:tap: Detect tap event
Using custom recognizer options such as direction and threshold:
<script>
import { Hammer, swipe } from 'svelte-hammer'
</script>
<div
use:swipe={{ direction: Hammer.DIRECTION_ALL }}
on:swipeleft={({ detail }) => /* Swipe Left */}
on:swiperight={({ detail }) => /* Swipe Right */}
on:swipeup={({ detail }) => /* Swipe Up */}
on:swipedown={({ detail }) => /* Swipe Down */}
>
</div>All gestures same usage.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent