React hook for following user interaction type

React hook useInteraction() allows to get the user interaction type: touch, mouse or keyboard.

▶︎ Demo

Installation

Using yarn:

yarn add use-interaction

Using npm:

npm i use-interaction --save

Usage

Import the hook:

importuseInteractionfrom'use-interaction'

Following user interaction type

If the user interaction changes, the pointerType, pointerHistory, and pointerAccuracy values will be updated. Keyboard strokes has no effect on the interaction type when the user is typing in a form element (input, select, and textarea). Only keyboard navigation is monitored.

const[pointerType,pointerHistory,pointerAccuracy]=useInteraction()

Full example

importReactfrom'react'importuseInteractionfrom'use-interaction'exportconstDemo=()=>{const[pointerType,pointerHistory,pointerAccuracy]=useInteraction()return(<code>
pointer: {pointerType||`none`} (can
{pointerType!=='mouse'&&'not'} hover)
<br/>
history: {`[${pointerHistory.join(', ')}]`}<br/>
accuracy: {pointerAccuracy||`none`}<br/></code>)}

Specification

useInteraction() input

object

Property Name	Type	Description	Default Value
initial	boolean	to not wait an action on the part of the user, the initial interaction type can be defined to be effective as soon as the page is loaded (i.e. touch)	null

import{isMobile}from'react-device-detect'const[pointerType,pointerHistory,pointerAccuracy]=useInteraction({initial: isMobile ? 'touch' : 'mouse',})

useInteraction() output

array

Returned Array	Type	Description	Default Value
1st element (pointerType)	string	current input of the user interaction: touch, mouse or keyboard (i.e. touch)	null
2nd element (pointerHistory)	Array.<string>	previous inputs of the user interaction listed in reverse chronological order (i.e. ['mouse', 'keyboard']}	[]
3rd element (pointerAccuracy)	number	[Experimental] max size of contact geometry collected from the current pointer (i.e. 23)	null