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.