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:

import useInteraction from '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

import React from 'react'
import useInteraction from 'use-interaction'

export const Demo = () => {
  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 |