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:
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 =
Full example
const Demo = { const pointerType pointerHistory pointerAccuracy = return <code> pointer: pointerType || `none` can pointerType !== 'mouse' && 'not' hover <br /> history: `[]` <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 |
const pointerType pointerHistory pointerAccuracy =
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 |