@healerlab/device-js NPM

@healerlab/device-js

Available for Javascript, Typescript, Vue, React and Angular

Setup

npm i @healerlab/device-js

with pnpm:

pnpm add @healerlab/device-js

with yarn:

yarn add @healerlab/device-js

Add it to your file or component:

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

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

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'

// or 
import pkg from '@healerlab/device-js';
const { detectDevice } = pkg;
</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>