Skip to content

zilverline/react-tap-event-plugin

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DEPRECATED

React 16.4 removes a lot of internals (#121) this plugin depends on and will break the plugin.

Since the problem it solves has been fixed in most browsers by now you should migrate away from this plugin.


Introduction

You've probably heard of iOS's dreaded 300ms tap delay. React's onClick attribute falls prey to it. Facebook's working on a solution in the form of TapEventPlugin, but it won't be made available until 1.0.

If you're reading this, you're probably working on a project that can't wait until they figure out how they want to publish it. This repo is for you.

When Facebook solves #436 and #1170, this repo will disappear.

Facebook is not planning on supporting tap events (#436) because browsers are fixing/removing the click delay. Unfortunately it will take a lot of time before all mobile browsers (including iOS' UIWebView) will and can be updated.

Verify if you need this plugin for the browsers you need to support.

Installation

Compatible with React >= 16.0 && < 16.4:

$ npm i --save react-tap-event-plugin

Compatible with React >= 15.4 && < 16.0:

$ npm i --save [email protected]

Compatible with React > 0.14 && < 15.4:

$ npm i --save [email protected]

Compatible with React <= 0.14:

$ npm i --save [email protected]

Usage

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

Example

See demo project for a complete working example.

var React = require("react");
var ReactDOM = require("react-dom");
injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

var Main = React.createClass({
  render: function() {
    return (
      <a
        href="#"
        onTouchTap={this.handleTouchTap}
        onClick={this.handleClick}>
        Tap Me
      </a>
    );
  },

  handleClick: function(e) {
    console.log("click", e);
  },

  handleTouchTap: function(e) {
    console.log("touchTap", e);
  }
});

ReactDOM.render(<Main />, document.getElementById("container"));

Ignoring ghost clicks

When a tap happens, the browser sends a touchstart and touchend, and then 300ms later, a click event. This plugin ignores the click event if it has been immediately preceeded by a touch event (within 750ms of the last touch event).

Occasionally, there may be times when the 750ms threshold is exceeded due to slow rendering or garbage collection, and this causes the dreaded ghost click.

The 750ms threshold is pretty good, but sometimes you might want to override that behaviour. You can do this by supplying your own shouldRejectClick function when you inject the plugin.

The following example will simply reject all click events, which you might want to do if you are always using onTouchTap and only building for touch devices:

var React = require('react'),
injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin({
  shouldRejectClick: function (lastTouchEventTimestamp, clickEventTimestamp) {
    return true;
  }
});

Build standalone version

Use the demo project and it's README instructions to build a version of React with the tap event plugin included.

About

Instant TapEvents for React

Resources

License

MIT, Unknown licenses found

Licenses found

MIT
LICENSE
Unknown
LICENSE-react

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%