https://github.com/danielnaab/virtual-dom-hammerjs
A virtual-dom hook that enables interop with hammer.js.
https://github.com/danielnaab/virtual-dom-hammerjs
Last synced: 11 months ago
JSON representation
A virtual-dom hook that enables interop with hammer.js.
- Host: GitHub
- URL: https://github.com/danielnaab/virtual-dom-hammerjs
- Owner: danielnaab
- License: mit
- Created: 2015-12-20T14:14:53.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-12-21T00:24:40.000Z (over 10 years ago)
- Last Synced: 2025-08-30T16:46:30.920Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# virtual-dom-hammerjs
A simple [virtual-dom hook](https://github.com/Matt-Esch/virtual-dom/blob/master/docs/hooks.md)
that wraps [Hammer.js](http://hammerjs.github.io/) events to the virtual-dom.
The general idea comes from [react-hammerjs](https://github.com/JedWatson/react-hammerjs),
but this implementation supports all events and the complete
[Hammer.js](http://hammerjs.github.io/) feature set with a declarative api.
## Usage
The `manager` property may be used to configure the Hammer manager. These
properties will be merged with the default ones.
In addition, the actual `Hammer.js` object is exposed as `Hammer.OPTS`, from
which one may access constants.
```javascript
var Hammer = require('virtual-dom-hammerjs')
var h = require('virtual-dom/h')
function render(count) {
return h('div', {
hammer: new Hammer({
events: {
tripletap: handleEvent,
pan: handleEvent,
panstart: handleEvent,
panmove: handleEvent,
panend: handleEvent,
pancancel: handleEvent,
panleft: handleEvent,
panright: handleEvent,
panup: handleEvent,
pandown: handleEvent,
pinch: handleEvent,
pinchstart: handleEvent,
pinchmove: handleEvent,
pinchend: handleEvent,
pinchcancel: handleEvent,
pinchin: handleEvent,
pinchout: handleEvent,
press: handleEvent,
pressup: handleEvent,
rotate: handleEvent,
rotatestart: handleEvent,
rotatemove: handleEvent,
rotateend: handleEvent,
rotatecancel: handleEvent,
swipe: handleEvent,
swipeleft: handleEvent,
swiperight: handleEvent,
swipeup: handleEvent,
swipedown: handleEvent,
tap: handleEvent
},
manager: {
touchAction: 'compute',
recognizers: {
// Custom recognizers:
tripletap: {
type: 'Tap',
options: {
taps: 3
},
recognizeWith: ['tap']
},
panh: {
type: 'Pan',
options: {
direction: Hammer.OPTS.DIRECTION_HORIZONTAL
}
},
panv: {
type: 'Pan',
options: {
direction: Hammer.OPTS.DIRECTION_VERTICAL
},
requireFailure: ['panh']
},
// The following recognizers update the default ones:
pan: {
options: {
enable: true
}
},
pinch: {
options: {
enable: true
},
recognizeWith: ['rotate']
},
rotate: {
options: {
enable: true
}
},
swipe: {
options: {
enable: true,
pointers: 1,
threshold: 10,
direction: Hammer.OPTS.DIRECTION_ALL,
velocity: 0.65
},
recognizeWith: ['pan']
},
tap: {
options: {
enable: false,
time: 600,
threshold: 100
}
}
}
}
})
}, 'Touch Me')
}
```