![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
react-tap-event-plugin
Advanced tools
Facebook's TapEventPlugin, temporarily available on npm until its made public in their repo
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.
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.
Compatible with React >= 16.0 && < 16.4:
$ npm i --save react-tap-event-plugin
Compatible with React >= 15.4 && < 16.0:
$ npm i --save react-tap-event-plugin@2.0.1
Compatible with React > 0.14 && < 15.4:
$ npm i --save react-tap-event-plugin@1.0.0
Compatible with React <= 0.14:
$ npm i --save react-tap-event-plugin@0.2.2
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
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"));
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;
}
});
Use the demo project and it's README instructions to build a version of React with the tap event plugin included.
FAQs
Facebook's TapEventPlugin, temporarily available on npm until its made public in their repo
The npm package react-tap-event-plugin receives a total of 0 weekly downloads. As such, react-tap-event-plugin popularity was classified as not popular.
We found that react-tap-event-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.