Detect if a device is mouse only, touch only, or hybrid. 

Detect if a device is mouse only, touch only, or hybrid

rafgraph

detect-it

  "description": "Detect if a device is mouse only, touch only, or hybrid",

    "build": "rm -rf lib && babel src -d lib --presets=env",

    "dev": "yarn link && babel src -d lib --watch --presets=env"

    "url": "git+https://github.com/rafgraph/detect-it.git"

  "author": "Rafael Pedicini <rafael@rafgraph.dev>",

    "url": "https://github.com/rafgraph/detect-it/issues"

  "homepage": "https://github.com/rafgraph/detect-it#readme",

    "eslint-config-airbnb-base": "^11.1.3",

> The most recent version of [`detect-it` is available here](https://github.com/rafgraph/detect-it)

Detect if a device is mouse only, touch only, or hybrid, and if it supports passive event listeners.

[Live detection test for v3][liveDetectionTest]

![npm](https://img.shields.io/npm/dm/detect-it)

[![npm](https://img.shields.io/npm/dm/detect-it?label=npm)](https://www.npmjs.com/package/detect-it) [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/detect-it/3?color=purple)](https://bundlephobia.com/result?p=detect-it@3)

Exports a reference to a singleton object (a micro state machine with an update function) with its state set to if the device is mouse only, touch only, or hybrid (and other related info about the device), as well as an `update()` function which updates the object's state.

`detect-it`'s state is based on the state of the four micro state machines that it contains ([`detect-hover`][detectHoverRepo], [`detect-pointer`][detectPointerRepo], [`detect-touch-events`][detectTouchEventsRepo], and [`detect-passive-events`][detectPassiveEventsRepo]). `detect-it`'s `update()` function first runs the `update()` function on each micro state machine that it contains, and then updates it own state.

Note that Detect It has removed support for Pointer Events detection because they're just not relevant enough (support for less than 60% of users, [see Can I Use][canIUsePointerEvents], and not supported by React). If you need Pointer Events detection, use [Detect It v1.1][detectItv1.1].

  deviceType: 'mouseOnly' / 'touchOnly' / 'hybrid',

  // access to the four micro state machines that it contains

  // updates the state of the four micro state machines it contains, and then updates its own state

detectIt.deviceType === 'mouseOnly' / 'touchOnly' / 'hybrid'; // the device type

detectIt.passiveEvents === true; // the browser supports passive event listeners

detectIt.hasMouse === true; // the deviceType is mouseOnly or hybrid

// the browser supports the touch events api, and the deviceType is touchOnly or hybrid

detectIt.primaryInput === 'mouse' / 'touch'; // the primary input type

// accessing the state of the micro state machines that detectIt contains

detectIt.state.detectHover; // see the detect-hover repo for more info

detectIt.state.detectPointer; // see the detect-pointer repo for more info

detectIt.state.detectTouchEvents; // see the detect-touch-events repo for more info

detectIt.state.detectPassiveEvents; // see the detect-passive-events repo for more info

// updating the state - most apps won't need to use this at all

// note that in the case of a legacy computer and browser, one that

// doesn't support any of detect-it's detection tests, the default state will be:

// note that in the case of a legacy touch device, one that supports the touch events api,

// but not any of the other detection tests, the default state will be:

Note that the `update()` function is run once at the time of import to set the object's initial state, and generally doesn't need to be run again. If it doesn't have access to the `window`, then the state will be `undefined` (`detect-it` will not throw an error), and you will have to call the `update()` function manually at a later time to update its state.

#### Using `detect-it` to set event listeners

// if passive events are supported by the browser

  document.addEventListener('scroll', handleScroll, { capture: false, passive: true });

  document.addEventListener('scroll', handleScroll, false);

if (detectIt.deviceType === 'mouseOnly') {

[liveDetectionTest]: https://detect-it.rafgraph.dev/

[liveDetectionTest]: https://detect-it-v3.rafgraph.dev/

[detectHoverRepo]: https://github.com/rafgraph/detect-hover

[detectPointerRepo]: https://github.com/rafgraph/detect-pointer

[detectTouchEventsRepo]: https://github.com/rafgraph/detect-touch-events

[detectPassiveEventsRepo]: https://github.com/rafgraph/detect-passive-events

[detectItv1.1]: https://github.com/rafgraph/detect-it/tree/v1.1.0

[reactInteractive]: https://github.com/rafgraph/react-interactive

[theListener]: https://github.com/rafgraph/the-listener

[currentInput]: https://github.com/rafgraph/current-input

[canIUsePointerEvents]: https://caniuse.com/#feat=pointer

[w3cMediaQueriesSpecLatestHover]: https://www.w3.org/TR/mediaqueries-4/#hover

[w3cMediaQueriesSpecLatestPointer]: https://www.w3.org/TR/mediaqueries-4/#pointer

[mdnTouchEvents]: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

[w3cTouchEventsSpecLatest]: https://w3c.github.io/touch-events/

[touchTests]: https://patrickhlauke.github.io/touch/

[passiveExplainer]: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

		{
		"name": "detect-it",
		"version": "3.0.6",
		"version": "3.0.7",
		"description": "Detect if a device is mouse only, touch only, or hybrid",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

		@@ -1,8 +0,10 @@
		# Detect It
		# Detect It - v3

		> The most recent version of [`detect-it` is available here](https://github.com/rafgraph/detect-it)

		Detect if a device is mouse only, touch only, or hybrid, and if it supports passive event listeners.

		[Live detection test][liveDetectionTest]
		[Live detection test for v3][liveDetectionTest]

		![npm](https://img.shields.io/npm/dm/detect-it)
		[![npm](https://img.shields.io/npm/dm/detect-it?label=npm)](https://www.npmjs.com/package/detect-it) [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/detect-it/3?color=purple)](https://bundlephobia.com/result?p=detect-it@3)

		@@ -13,4 +15,2 @@ Exports a reference to a singleton object (a micro state machine with an update function) with its state set to if the device is mouse only, touch only, or hybrid (and other related info about the device), as well as an `update()` function which updates the object's state.

		Note that Detect It has removed support for Pointer Events detection because they're just not relevant enough (support for less than 60% of users, [see Can I Use][canIUsePointerEvents], and not supported by React). If you need Pointer Events detection, use [Detect It v1.1][detectItv1.1].

		### `detectIt` micro state machine
		@@ -170,3 +170,3 @@ ```javascript
		<!-- links -->
		[liveDetectionTest]: https://detect-it.rafgraph.dev/
		[liveDetectionTest]: https://detect-it-v3.rafgraph.dev/

		@@ -173,0 +173,0 @@ [detectHoverRepo]: https://github.com/rafgraph/detect-hover

Fixed alerts

Improved metrics