@zohodesk/haptic

Haptic

This package contains touch handling functionalities for mobile.

Example Usage For Component

import Touch from "@zohodesk/haptic";

<Touch
  handleTouchStart={this.handleTouchStart}
  handleTouchMove={this.handleTouchMove}
  handleTouchForceChange={this.handleTouchForceChange}
  handleTouchEnd={this.handleTouchEnd}
>
  {children}
</Touch>

Props

• children : React Element required (React Element)

• handleTouchStart(evt, inital) : Function handler function

  • evt will return touch start event
  • inital {pageX: 0, pageY: 0, force: 0-1} Position of the event

• handleTouchMove(evt,inital,current) : Function handler function

  • evt will return touch start event
  • inital {pageX: 0, pageY: 0, force: 0-1} Position of the starting point
  • current {pageX: 0, pageY: 0, force: 0-1} Current Position of the touch point

• handleTouchForceChange(force) : Function handler function

  • force - (0-1) Position of the event

• handleTouchEnd(evt, current) : Function handler function

  • evt will return touch start event
  • current {pageX: 0, pageY: 0, force: 0-1} Current Position of the touch point

• handleSwipeLeft(inital, current) : Function handler function

  • inital {pageX: 0, pageY: 0, force: 0-1} Position of the starting point
  • current {pageX: 0, pageY: 0, force: 0-1} Current Position of the touch point

• handleSwipeRight(inital, current) : Function handler function

  • inital {pageX: 0, pageY: 0, force: 0-1} Position of the starting point
  • current {pageX: 0, pageY: 0, force: 0-1} Current Position of the touch point

• handleSwipeUp(inital, current) : Function handler function

  • inital {pageX: 0, pageY: 0, force: 0-1} Position of the starting point
  • current {pageX: 0, pageY: 0, force: 0-1} Current Position of the touch point

• handleSwipeDown(inital, current) : Function handler function

  • inital {pageX: 0, pageY: 0, force: 0-1} Position of the starting point
  • current {pageX: 0, pageY: 0, force: 0-1} Current Position of the touch point

• config : Object travelled distance in pixel. default 50.

  • swipeDistance : Number travelled distance in pixel. default 50.
  • longPressDuration : Number This will be usefull when ontouchforcechange is not supported browsers. default 50.
  • preventClickTime : Number To prevent click event time in millis. default 500.
  • preventClickMaxForce : Number To prevent click event by max force. default 0.5
  • preventDefault : boolean

1.0.0 , 1.0.1

• Touch component and useSwipe hook published