React: Implement fast click to remove delay on mobile web browser
Will be nice is react has this feature that improve responsiveness similar to FastClick by FT Labs.
wildfiremedia
All 16 comments
If you just load the regular FastClick then that should fix the browser delay at the DOM event level, which the React event system sits on top. Right?
RickWong
on 27 Dec 2014
@RickWong no. FastClick doesn't work with React because React has all faux events. I wish it did support it tho. Now we have to include a click helper mixin everywhere. Its kinda gross.
OscarGodson
on 20 Jan 2015
Odd – I was under the impression that fastclick works properly with React.
sophiebits
on 20 Jan 2015
@spicyj other people have run into it not working. Asking around about it everyone has their own hacks around it. http://stackoverflow.com/questions/24335821/can-i-fastclick-reactjs-running-in-cordova
OscarGodson
on 20 Jan 2015
I ended up using react-tap-event-plugin
iamstarkov
on 11 May 2015
@iamstarkov how are you using react-tap-event-plugin to solve the problem?
geekyme
on 19 May 2015
yep
iamstarkov
on 19 May 2015
How are you using it?
geekyme
on 19 May 2015
The same way as stated in readme of react-tap-event-plugin
iamstarkov
on 19 May 2015
I added the library though and didn't see any noticeable change.
I'm using the commonjs syntax to require and inject the plugin.
Sent from my iPhone
On 19 May 2015, at 7:10 pm, Vladimir Starkov [email protected] wrote:
The same way as stated in readme of react-tap-event-plugin
—
Reply to this email directly or view it on GitHub.
geekyme
on 19 May 2015
It’s not enough to inject it, you alse need to use onTouchTap={this._handleTouchTap} attr
iamstarkov
on 19 May 2015
nvm. following this answer immediately made fastclick work for me. http://stackoverflow.com/a/30316754/1770280
I'm not sure whether all edge cases are covered but most of the problems I was facing were fixed by that few lines of code.
geekyme
on 19 May 2015
Does the react-tap-event-plugin also work with desktop? (i.e., one solution to rule 'em all?)
frankandrobot
on 13 Aug 2015
Most mobile browsers have already fixed this. https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away?hl=en
Also, as per https://github.com/facebook/react/issues/436#issuecomment-178268985, we are probably going in the opposite direction and pulling the tap event plugin out of the core.
jimfb
on 10 Feb 2016
On our two IOS 9.3 test ipads, doing width=device-width as documented at https://developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html#//apple_ref/doc/uid/TP40014305-CH10-SW8 does not work on our two IOS 9.3 test iPads (where it DOES work on Android Chrome).
width=device-width not working on IOS 9.3 was confirmed in this discussion: https://github.com/ftlabs/fastclick/issues/450
For this reason, we are still using fastclick.js with our react.js app (see http://stackoverflow.com/questions/24335821/can-i-fastclick-reactjs-running-in-cordova/30316754#30316754 ). fastclick only activates where necessary.
cpbotha
on 20 Jul 2016
fastClick cannot get along with onClick event. I have to switch to react-tap-event-plugin
infacq
on 24 May 2017
Related issues
UnbearableBear
·
3Comments
hnordt
·
3Comments
varghesep
·
3Comments
krave1986
·
3Comments
h1orz
·
3Comments
Most helpful comment
On our two IOS 9.3 test ipads, doing
width=device-widthas documented at https://developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html#//apple_ref/doc/uid/TP40014305-CH10-SW8 does not work on our two IOS 9.3 test iPads (where it DOES work on Android Chrome).width=device-widthnot working on IOS 9.3 was confirmed in this discussion: https://github.com/ftlabs/fastclick/issues/450For this reason, we are still using fastclick.js with our react.js app (see http://stackoverflow.com/questions/24335821/can-i-fastclick-reactjs-running-in-cordova/30316754#30316754 ). fastclick only activates where necessary.