npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

detect-touch

v1.1.2

Published

Detects if a device has a touch interface

Downloads

1,558

Readme


This has been deprecated in favor of Detect It


Detect Touch Devices

 

Live touch detection test

detect-touch will detect if a device has a touch interface. It provides both a boolean one time touch detection on import, as well as a function to run the touch detection at any time.

 

Installing detect-touch

$ npm install --save detect-touch

 

Importing detect-touch

Importing only the hasTouch boolean:

import { hasTouch } from 'detect-touch';
// or
var hasTouch = require('detect-touch').hasTouch;

Importing only the detectTouch function:

import { detectTouch } from 'detect-touch';
// or
var detectTouch = require('detect-touch').detectTouch;

Importing both the hasTouch boolean and the detectTouch function:

import { hasTouch, detectTouch } from 'detect-touch';
// or
var hasTouch = require('detect-touch').hasTouch;
var detectTouch = require('detect-touch').detectTouch;

 

Using detect-touch

The hasTouch boolean is established at the time it is imported, and the function to detect a touch device runs only one time. In most cases this is all you need.

// Using the hasTouch boolean:
hasTouch === true;
// or
hasTouch === false;

The detectTouch function attempts to detect a touch device each time it is called and can be used to check or recheck for a touch device at a specific time. Returns a boolean. For example, if detect-touch doesn't have access to the window when it is imported you'll need to wait until it does before checking if a device has a touch interface.

// Using the detectTouch function:
detectTouch() === true;
// or
detectTouch() === false;

 

Detection Tests

detect-touch checks to see if the browser implements any of the following:

The standard W3C Touch Events API (this is the vast majority of touch devices), by checking for:

'ontouchstart' in window

Number of touch points (required to detect Microsoft's Pointer Events API running on a touch device, however, devices not implementing Pointer Events may also indicate this), by checking for:

window.navigator.maxTouchPoints > 0 ||
window.navigator.msMaxTouchPoints > 0 // pre IE 11

Firefox's legacy DocumentTouch (which is now obsolete), by checking for:

window.DocumentTouch && document instanceof DocumentTouch