1.0.1 • Public • Published


    Configurable touch bindings for reactive with Hammer. Use on-swipe, on-tap, on-rotate and many more in your reactive views. Also supports bindings for custom recognizers, like on-doubletap.

    Jump to: Quickstart - Live example - Install - Usage - Test - License

    Browser support

    Build Status

    See Hammer browser support and reactive for actual browser support.


    var reactive = require('reactive')
      , touch = require('reactive-touch')
    var tpl  = '<div on-swipeleft="swipe">Swipe left</div>'
    var view = reactive(tpl, null, {
      bindings: touch(),
      delegate: {
        swipe: function(ev, ctx) {
          console.log('you swiped left')

    Live example

    This live example demonstrates:

    • Custom recognizers
    • Reactive enabling of events
    • Per-element and per-view options


    npm i reactive-touch

    Then bundle for the browser with browserify.


    touch([bindings][, options])

    • bindings: existing bindings to extend
    • options: per-view options (see below)


    Your view can react to any Hammer event by adding attributes in the form of on-[event]="handler name". If no handler name is given, it is assumed to be the event name. These are the same:

    <div on-pan></div>
    <div on-pan="pan"></div>

    The handler will receive two arguments, similar to reactive's built-in on-click:

    • ev: event data
    • ctx: reactive instance


    Each element with touch bindings gets a set of recognizers. Recognizers can be configured per-view and per-element.


    Add attributes in the form of [recognizer]-[option]="value". Values will be interpolated if wrapped in brackets, and cast to integers, floats or booleans if necessary. Examples:

    <div on-pan pan-direction="horizontal"></div>
    <div on-rotateend="rotate" rotate-threshold="{ modelProperty + 10 }"></div>
    <div on-swipe swipe-velocity="0.65"></div>
    <div on-tap tap-taps="2">double tap</div>
    <div on-pinch on-rotate pinch-with="rotate"></div>
    <div on-press press-enable="{ someMethod }"></div>


    Group options by lowercase recognizer name.

    touch(bindings, {
      swipe: {
        threshold: 100

    Custom recognizers

    Simply add a group to options with a custom name. Optionally set recognizer, required if the name doesn't contain a standard name. In the following example, recognizer could have been left out.

    <div on-tap on-doubletap></div>
    touch(bindings, {
      tap: {
        requireFailure: 'doubletap'
      doubletap: {
        recognizer: 'Tap',
        taps: 2,
        with: 'tap'

    List of options

    Common Description
    enable If false, no events will be emitted. Defaults to true.
    with A lowercase recognizer name (e.g. tap or mycustomtap) to recognize simultaneously. Shortcut for recognizeWith().
    requireFailure A lowercase recognizer name that is required to fail before recognizing. Shortcut for requireFailure().
    setup A view method name, called after recognizer is created and options are set. For advanced usage. Receives three arguments: el, recognizer and ctx.

    For direction, use a Hammer.DIRECTION_* constant or a shorthand like all, horizontal, left, etc. Please follow the links below for a description of the other options.

    Recognizer Options
    Swipe threshold, pointers, direction, velocity
    Pan pointers, threshold, direction
    Pinch pointers, threshold
    Rotate pointers, threshold
    Tap pointers, taps, interval, time, threshold, posThreshold
    Press pointers, threshold, time

    List of events

    Recognizer Events
    Swipe swipe, swipeleft, swiperight, swipeup, swipedown
    Pan pan, panstart, panmove, panend, pancancel, panleft, panright, panup, pandown
    Pinch pinch, pinchstart, pinchmove, pinchend, pinchcancel, pinchin, pinchout
    Rotate rotate, rotatestart, rotatemove, rotateend, rotatecancel
    Tap tap
    Press press


    npm i zuul -g
    npm test

    Or local:

    npm run test-local


    MIT © Vincent Weevers


    npm i reactive-touch

    DownloadsWeekly Downloads






    Last publish


    • vweevers