Device-sherlock NPM

Device Sherlock

Powerful, lightweight device detector module.

Available for Javascript, Typescript, Vue, React and Angular

Note: This module is not a device detector, it's a device type detector. This module is ECMAScript modules (ESM) only.

Installation

NPM:

npm i device-sherlock

PNPM:

pnpm add device-sherlock

Yarn:

yarn add device-sherlock

Use

import { deviceSherlock } from 'device-sherlock';

or:

import pkg from 'device-sherlock';
const { deviceSherlock } = pkg;

That's it, you can now use deviceSherlock in your app ✨

Flags

You can use these flags to detect the device type.

deviceSherlock.isDesktop
deviceSherlock.isMobile
deviceSherlock.isTablet
deviceSherlock.isMobileOrTablet
deviceSherlock.isDesktopOrTablet
deviceSherlock.isIos
deviceSherlock.isWindows
deviceSherlock.isMacOS
deviceSherlock.isApple
deviceSherlock.isAndroid
deviceSherlock.isFirefox
deviceSherlock.isEdge
deviceSherlock.isChrome
deviceSherlock.isSafari
deviceSherlock.isSamsung
deviceSherlock.isCrawler
deviceSherlock.isUnknown
deviceSherlock.isCloudFront
deviceSherlock.isCloudflare
deviceSherlock.userAgent

The user agent is also injected an accessible with deviceSherlock.userAgent.

Settings

You can set the user agent manually.

deviceSherlock.setUserAgent('Mozilla/5.0 (Linux; Android 10; SM-G960U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.181 Mobile Safari/537.36');

You can define headers manually.

deviceSherlock.setHeaders({
  'CF-Device-Type': 'mobile',
  'CloudFront-Is-Mobile-Viewer': 'true',
  'CloudFront-Is-Tablet-Viewer': 'false',
  'CloudFront-Is-Desktop-Viewer': 'false',
  'CloudFront-Is-Ios-Viewer': 'false',
  'CloudFront-Is-Android-Viewer': 'true',
});

Usage

Vue, React, Angular

You can use deviceSherlock inside a script to access the flags.

<script setup>
import { deviceSherlock } from 'device-sherlock'

import pkg from 'device-sherlock';
const { deviceSherlock } = pkg;
</script>

Switch a view

<template>
  <section>
    <div v-if="deviceSherlock.isDesktop">
      Desktop
    </div>
    <div v-else-if="deviceSherlock.isTablet">
      Tablet
    </div>
    <div v-else>
      Mobile
    </div>
  </section>
</template>