Getting Started

Installation

Prerequisites

• Node.js version 16 or higher.
• Text Editor.
  • VSCode is recommended, along with the official Vue extension.

To get started, you can install it with:

npm

$ npm i @healerlab/device-js

$ npm i @healerlab/device-js

pnpm

$ pnpm add @healerlab/device-js

$ pnpm add @healerlab/device-js

yarn

$ yarn add @healerlab/device-js

$ yarn add @healerlab/device-js

Usage

Add it to your file or component:

import { detectDevice } from '@healerlab/device-js'

import { detectDevice } from '@healerlab/device-js'

or

import pkg from '@healerlab/device-js';
const { detectDevice } = pkg;

import pkg from '@healerlab/device-js';
const { detectDevice } = pkg;

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

Flags

You can use these flags to detect the device type.

detectDevice.isDesktop
detectDevice.isMobile
detectDevice.isTablet
detectDevice.isMobileOrTablet
detectDevice.isDesktopOrTablet
detectDevice.isIos
detectDevice.isWindows
detectDevice.isMacOS
detectDevice.isApple
detectDevice.isAndroid
detectDevice.isFirefox
detectDevice.isEdge
detectDevice.isChrome
detectDevice.isSafari
detectDevice.isSamsung
detectDevice.isCrawler
detectDevice.userAgent

detectDevice.isDesktop
detectDevice.isMobile
detectDevice.isTablet
detectDevice.isMobileOrTablet
detectDevice.isDesktopOrTablet
detectDevice.isIos
detectDevice.isWindows
detectDevice.isMacOS
detectDevice.isApple
detectDevice.isAndroid
detectDevice.isFirefox
detectDevice.isEdge
detectDevice.isChrome
detectDevice.isSafari
detectDevice.isSamsung
detectDevice.isCrawler
detectDevice.userAgent

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

Usage

Vue, React, Angular

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

<script setup>
import { detectDevice } from '@healerlab/device-js'
</script>

<script setup>
import { detectDevice } from '@healerlab/device-js'
</script>

Switch a view

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

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

CloudFront Support

If the user-agent is Amazon CloudFront, this module checks the following headers :

• CloudFront-Is-Mobile-Viewer
• CloudFront-Is-Tablet-Viewer
• CloudFront-Is-Desktop-Viewer
• CloudFront-Is-Ios-Viewer
• CloudFront-Is-Android-Viewer

Here are the details about the headers:
Amazon CloudFront - Headers for determining the viewer's device type

Caution

isWindows and isMacOS flags are not available with CloudFront.

Cloudflare Support

This module checks the header CF-Device-Type.

Here are the details about the header: https://support.cloudflare.com/hc/en-us/articles/229373388-Cache-Content-by-Device-Type-Mobile-Tablet-Desktop-

Data Source

This module uses crawler-user-agents to generate the regular expression that detect a crawler.

Note

This module inspired by @nuxtjs/device module

Demo

Your device info:

{ "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36", "isMobile": false, "isMobileOrTablet": false, "isTablet": false, "isDesktop": true, "isIos": false, "isAndroid": false, "isWindows": false, "isMacOS": true, "isApple": true, "isDesktopOrTablet": true, "isSafari": false, "isFirefox": false, "isEdge": false, "isChrome": true, "isSamsung": false, "isCrawler": false }