Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
use-double-click
Advanced tools
A simple React hook for differentiating single and double clicks on the same component.
use-double-click is a simple React hook for differentiating single and double clicks on the same component.
Check out the demo on Codesandbox
onDoubleClick()
?When you double click on an element, onClick()
fires twice alongside your single onDoubleClick()
callback. This effect isn't desirable when a single click and a double click have different functions!
useDoubleClick()
waits within a latency window after a click for a secondary click, and only after this period either the onSingleClick
or onDoubleClick()
callback will fire a single time.
yarn add use-double-click
import { useRef } from 'react';
import useDoubleClick from 'use-double-click';
const Button = () => {
const buttonRef = useRef();
useDoubleClick({
onSingleClick: e => {
console.log(e, 'single click');
},
onDoubleClick: e => {
console.log(e, 'double click');
},
ref: buttonRef,
latency: 250
});
return <button ref={buttonRef}>Click Me</button>
}
Prop | Description |
---|---|
onSingleClick | A callback function for single click events |
onDoubleClick | A callback function for double click events |
ref | Dom node to watch for double clicks |
latency | The amount of time (in milliseconds) to wait before differentiating a single from a double click |
MIT © Tim Ellenberger
FAQs
A simple React hook for differentiating single and double clicks on the same component.
The npm package use-double-click receives a total of 4,180 weekly downloads. As such, use-double-click popularity was classified as popular.
We found that use-double-click 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
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.