@healerlab/device-js
v0.0.4
Published
Powerful, lightweight device detector module
Downloads
45
Maintainers
Readme
@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'
or
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>
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-
License
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