use-interaction v2.0.0-beta.3

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

import { isMobile } from 'react-device-detect'

const [pointerType, pointerHistory, pointerAccuracy] = useInteraction({
  initial: isMobile ? 'touch' : 'mouse',
})

useInteraction() output

array