tapOrClick is the simplest solution to the problem: it triggers a given callback when
onClick if there are no touch events. This probably covers all use cases where you simply want an
tapOrClick hides the complexity of the issue so you don't need to think about what kind of hellish
wizardry needs to be done just to get an immediate click!
tapOrClick is scrolling aware and does not trigger clicks
when scrolling. Also, ghost clicks are busted.
This utility has been designed to be easy to use with React, but you can use it elsewhere; it just might not be as convenient as with React. If you wish to have easier support for your use case then please open a new issue and we'll see what can be done!
react-tap-or-click is only usable as npm module. Thus:
npm i react-tap-or-click
Babel and JSX
import React from 'react'import tapOrClick from 'react-tap-or-click'const YourComponent = React
'use strict'var React =var tapOrClick =var YourComponent = Reactmoduleexports = YourComponent
- Because about 4 kB of non-minified code (2.3 kB minified) should be enough to solve this problem.
fastclickcauses nasty side effects and hard-to-understand bugs when used with React.
react-tap-event-plugincontains a lot of code, may require you to build your own minified React bundle and you have to define two handlers for the same thing (
- Any existing
onClickwill be overwritten.
- Up to 10000 callbacks are cached at once. Cache is flushed if going over limit. You may have a design flaw if you hit
this size on a regular page. This is warned about with a normal
- The code could be more compact if it had less abstractions; the current code ought to be readable enough so you can understand it, too!