use-more-than-click

React use more than click

Handles double clicks and long presses on buttons.

Installation

npm install use-more-than-click

How 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.