0.1.5 • Published 2 years ago
use-more-than-click v0.1.5
React use more than click 
Handles double clicks and long presses on buttons.
Installation
npm install use-more-than-clickHow to use
You can get inspired by Example here and Storybook demo here.
import { useMoreThanClick } from 'use-more-than-click'
import { useRef } from 'react'
const MyApp = () => {
const ref = useRef(null)
useMoreThanClick(ref, (actionType) => {
alert(`You've performed ${actionType}.`)
})
return <button ref={ref}>Click me</button>
}Parameters
useMoreThanClick(ref, actionHandler, progressHandler, options)ref
Element ref created by useRef.
actionHandler
Callback called after user successfully performs double click on long press.
progressHandler
Callback called every time progress updates. Progress indicating how close is user to performing an action (triggering actionHandler). 0 meaning hasn't tried yet and 1 indicates complete long press.
options
| name | description | type | default |
|---|---|---|---|
| firstSingleClickProgress | How much should the progress be set to after a first short click to indicate that more than click is expected. | number from 0 to 1 | 0.3 |
| minimumHoldDuration | How much time should pass while holding before assuming user is trying to hold. | number in milliseconds | 300 |
| holdDurationToAction | For how long should user hold to trigger action callback. | number in milliseconds | 800 |
| decayDuration | How long it takes to reset to initial state after unfinished hold. | number in milliseconds | 1000 |
| decayAfterActionDuration | How long it takes to reset after triggered action. | number in milliseconds | 200 |
| doubleClickMaximumInterval | Maximum accepted delay between first and second click to be identified as a double click. | number in milliseconds | 500 |
Development
Run npm start and npm run storybook parallelly.