svelte-hammer
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.7 • Public • Published

    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.

    Install

    This library support Svelte >= 3.0. And use Hammer.js > 2.x.

    NPM

    npm install svelte-hammer
    or
    yarn add svelte-hammer
    

    rollup config

    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'] }
        }),
        // ...
      ]
    }

    Usage

    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.

    Pan

    <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>

    Directives

    • on:pan: Detect all pan event
    • on:panstart: Detect start pan event
    • on:panmove: Detect move pan event
    • on:panend: Detect end pan event
    • on:pancancel: Detect cancel pan event
    • on:panleft: Detect left pan event
    • on:panright: Detect right pan event
    • on:panup: Detect up pan event
    • on:pandown: Detect down pan event

    Pinch

    <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>

    Directives

    • on:pinch: Detect all pinch event
    • on:pinchstart: Detect start pinch event
    • on:pinchmove: Detect move pinch event
    • on:pinchend: Detect end pinch event
    • on:pinchcancel: Detect cancel pinch event
    • on:pinchin: Detect in pinch event
    • on:pinchout: Detect out pinch event

    Press

    <script>
      import { press } from 'svelte-hammer'
    </script>
    <div
      use:press
      on:press={({ detail }) => /* Press */}
      on:pressup={({ detail }) => /* Press Up */}
    >
    </div>

    Directives

    • on:press: Detect press event
    • on:pressup: Detect up press event

    Rotate

    <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>

    Directives

    • on:rotate: Detect all rotate event
    • on:rotatestart: Detect start rotate event
    • on:rotatemove: Detect move rotate event
    • on:rotateend: Detect end rotate event
    • on:rotatecancel: Detect cancel rotate event

    Swipe

    <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>

    Directives

    • on:swipe: Detect all swipe event
    • on:swipeleft: Detect left swipe event
    • on:swiperight: Detect right swipe event
    • on:swipeup: Detect up swipe event
    • on:swipedown: Detect down swipe event

    Tap

    <script>
      import { tap } from 'svelte-hammer'
    </script>
    <div
      use:tap
      on:tap={({ detail }) => /* Tap */}
    >
    </div>

    Directives

    • on:tap: Detect tap event

    Using Custom Options

    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.

    License

    MIT

    Author

    Hyo Bum Lee

    Install

    npm i svelte-hammer

    DownloadsWeekly Downloads

    78

    Version

    0.1.7

    License

    MIT

    Unpacked Size

    30.8 kB

    Total Files

    11

    Last publish

    Collaborators

    • beomy