Tappable component for React. Abstracts touch events to implement onTap, onPress, and pinch events.
The events mimic their native equivalents as closely as possible:
- the baseClass (default:
Tappable) has-activeor-inactiveadded to it to enable pressed-state styling - the pressed state is visually cancelled if the touch moves too far away from the element, but resumes if the touch comes back again
- when you start scrolling a parent element, the touch event is cancelled
- if the
onPressproperty is set, it will cancel the touch event after the press happens
When touch events are not supported, it will fall back to mouse events. Keyboard events are also supported, emulating the behaviour of native button controls.
Live demo: jedwatson.github.io/react-tappable
To build the examples locally, run:
npm install
gulp dev
Then open localhost:8000 in a browser.
The easiest way to use React-tappable is to install it from npm.
npm install react-tappable --save
Ensure to include it in your own React build process (using Browserify, etc).
You could also use the standalone build by including dist/react-tappable.js in your page; but, if you do this, make sure you have already included React, and that it is available globally.
React-tappable generates a React component (defaults to <span>) and binds touch events to it.
To disable default event handling (e.g. scrolling) set the preventDefault prop.
import Tappable from 'react-tappable';
<Tappable onTap={this.handleTapEvent}>Tap me</Tappable>For a lighter component, you can opt-in to just the features you need:
import Tappable from 'react-tappable/lib/Tappable';
import Pinchable from 'react-tappable/lib/Pinchable';
import TapAndPinchable from 'react-tappable/lib/TapAndPinchable';
<Tappable onTap={this.handleTapEvent}>I respond to Tap events</Tappable>
<Pinchable onPinch={this.handlePinch}>I respond to Pinch events</Pinchable>
<TapAndPinchable onTap={this.handleTapEvent} onPinch={this.handlePinch}>In respond to both!</TapAndPinchable>The TapAndPinchable component is the default one you get when you just import react-tappable.
activeDelayms delay before the-activeclass is added, defaults to0componentcomponent to render, defaults to'span'classesoptional object containingactiveandinactiveclass names to apply to the component; useful with css-modulesclassBasebase to use for the active/inactive classesclassNameoptional class name for the componentmoveThresholdpx to allow movement before cancelling a tap; defaults to100pressDelayms delay before a press event is detected, defaults to1000pressMoveThresholdpx to allow movement before ignoring long presses; defaults to5preventDefault(boolean) automatically call preventDefault on all eventsstopPropagation(boolean) automatically call stopPropagation on all eventsstyle(object) styles to apply to the component
These are the special events implemented by Tappable.
onTapfired when touchStart or mouseDown is followed by touchEnd or mouseUp within the moveThresholdonPressfired when a touch is held for the specified msonPinchStartfired when two fingers land on the screenonPinchMovefired on any movement while two fingers are on screenonPinchEndfired when less than two fingers are left on the screen, onTouchStart is triggerred, if one touch remains
Pinch events come with a special object with additional data to actually be more useful than the native events:
touches: Array of Objects - {identifier, pageX, pageY} - raw data from the eventcenter: Object - {x, y} - Calculated center between the two touch pointsangle: Degrees - angle of the line connecting the two touch points to the X-axisdistance: Number of pixels - beween the two touch pointsdisplacement: Object {x, y} - offset of the center since the pinch begandisplacementVelocity: Object {x, y} : Pixels/ms - Immediate velocity of the displacementrotation: degrees - delta rotation since the beginning of the gesturerotationVelocity: degrees/millisecond - immediate rotational velocityzoom: Number - Zoom factor - ratio between distance between the two touch points now over initialzoomVelocity: zoomFactor/millisecond - immediate velocity of zoomingtime: milliseconds since epoch - Timestamp
- The pinch implementation has not been thoroughly tested
- Any touch event with 3 three or more touches is completely ignored.
The following native event handlers can also be specified.
onKeyDownonKeyUponTouchStartonTouchMoveonTouchEndonMouseDownonMouseUponMouseMoveonMouseOut
Returning false from onKeyDown, onMouseDown, or onTouchStart handlers will prevent Tappable from handling the event.
See CHANGES.md
Copyright (c) 2017 Jed Watson. MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent