react-fastclick alternatives and similar libraries
Based on the "UI" category.
Alternatively, view react-fastclick alternatives based on common mentions on social networks and blogs.
-
Next.js Enterprise Boilerplate
💼 An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development. -
react-static-container
Renders static content efficiently by allowing React to short-circuit the reconciliation process.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-fastclick or a related project?
README
React Fastclick
Instantly make your desktop / hybrid apps more responsive on touch devices.
React Fastclick automatically adds fastclick touch events to elements with onClick attributes (and those that require special functionality, such as inputs) to prevent the delay that occurs on some touch devices.
Installation
Use npm to install react-fastclick
npm install react-fastclick
Usage
Initialize react-fastclick
in your main javascript file before any of your components are created, and you're done.
Now any calls to onClick or elements with special functionality, such as inputs, will have fast touch events added automatically - no need to write any additional listeners.
ES6
import initReactFastclick from 'react-fastclick';
initReactFastclick();
ES5
var initReactFastclick = require('react-fastclick');
initReactFastclick();
Notes
- The event triggered on touch devices is a modified
touchend
event. This means that it may have some keys that are unusual for a click event.
In order to simulate a click as best as possible, this event is populated with the following keys / values. All positions are taken from the last know touch position.
{
// Simulate left click
button: 0,
type: 'click',
// Additional key to tell the difference between
// a regular click and a fastclick
fastclick: true,
// From touch positions
clientX,
clientY,
pageX,
pageY,
screenX,
screenY
}
On some devices the elements flicker after being touched. This can be prevented by setting the css property
-webkit-tap-highlight-color
to transparent. Either targethtml, body
(to prevent the flickering on all elements) or target the specific element you don't want to flicker e.g.button
.html, body { -webkit-tap-highlight-color: transparent; }
Support
React Fastclick 3.x.x has been tested with React 15, but should support older versions also.