EctMobileService JS

ect-mobile-service-js provides viewport helpers for mobile/tablet detection in Vanilla JS and React, without Angular runtime dependency.

Build

npm run build:ect-mobile-service-js

Vanilla JS

import {
  isMobileDevice,
  isSmallScreenDeviceButNotMobile,
  EctMobileServiceJs
} from 'ect-mobile-service-js';

console.log(isMobileDevice());
console.log(isSmallScreenDeviceButNotMobile());

const service = new EctMobileServiceJs();
console.log(service.isMobileDevice(), service.isSmallScreenDeviceButNotMobile());

React

import { useEffect, useState } from 'react';
import { isMobileDevice, isSmallScreenDeviceButNotMobile } from 'ect-mobile-service-js';

export function DeviceBadge() {
  const [mode, setMode] = useState('desktop');

  useEffect(() => {
    if (isMobileDevice()) setMode('mobile');
    else if (isSmallScreenDeviceButNotMobile()) setMode('tablet');
    else setMode('desktop');
  }, []);

  return <span>Device: {mode}</span>;
}

SSR / non-browser usage

If window.matchMedia is unavailable, checks return false. You can inject a custom host:

import { isMobileDevice } from 'ect-mobile-service-js';

const fakeHost = {
  matchMedia: (query) => ({ matches: query.includes('max-width: 760px') })
};

console.log(isMobileDevice(fakeHost)); // true

API

• isMobileDevice(host?)
• isSmallScreenDeviceButNotMobile(host?)
• EctMobileServiceJs
• createEctMobileServiceJs(host?)

Dependencies

• No framework dependency at runtime

Further help

• https://angular-grid.net/

Licence

The licence agreement for this paid component can be found here:

• https://angular-grid.net/assets/licence/licence_agreement.txt