device-type-detection

A tiny React hook in form of node module to detect device type and orientation in browsers. It supports mobile, tablet, desktop, TV, and 4K screens, exposing granular breakpoints and orientation flags.

Features

• Detects mobile (small/medium/large), tablet (small/medium/large), laptop, desktop, TV, and 4K TV
• Provides portrait vs. landscape orientation
• Touch detection via navigator.maxTouchPoints and react-device-detect
• Throttled resize listener for performance
• Full TypeScript support with declaration files

Peer Dependencies

This package relies on the following peer dependencies. Make sure they are installed in your project:

• react
• react-dom
• lodash
• react-device-detect

npm install react react-dom lodash react-device-detect

yarn add react react-dom lodash react-device-detect

Installation

npm install device-type-detection

yarn add device-type-detection

Quick Start

import React from "react";

import { useDeviceTypeDetection } from "device-type-detection";

const App: React.FC = () => {
  const {
    deviceType,
    orientation,
    isMobile,
    isTablet,
    isDesktop,
    isTV,
    isPortrait,
    isLandscape,
    // ...many more flags
  } = useDeviceTypeDetection();

  return (
    <div>
      <p>
        Device: <strong>{deviceType}</strong>
      </p>
      <p>
        Orientation: <strong>{orientation}</strong>
      </p>
      {isMobile && <p>This is a mobile device.</p>}
    </div>
  );
};

export default App;

API

useDeviceTypeDetection()

Returns a DeviceDetectionResult object with the following properties:

| Property | Type | Description | | -------------------- | --------------------------- | ------------------------------------------------------------------------------ | | deviceType | string | One of the DEVICE_TYPE enum values with _VERTICAL or _HORIZONTAL suffix. | | touchDevice | boolean | True if the device supports touch (maxTouchPoints > 0). | | isPortrait | boolean | True if viewport height > width. | | isLandscape | boolean | True if viewport width > height. | | orientation | 'portrait' \| 'landscape' | Shorthand for portrait vs. landscape. | | isMobile | boolean | Device is any mobile (MOBILE_S, MOBILE_M, MOBILE_L). | | isTablet | boolean | Device is any tablet (TABLET_S, TABLET_M, TABLET_L). | | isMobileVertical | boolean | Mobile and portrait orientation. | | isMobileHorizontal | boolean | Mobile and landscape orientation. | | isTabletVertical | boolean | Tablet and portrait orientation. | | isTabletHorizontal | boolean | Tablet and landscape orientation. | | isMobileS | boolean | Exactly small mobile (MOBILE_S). | | isMobileM | boolean | Exactly medium mobile (MOBILE_M). | | isMobileL | boolean | Exactly large mobile (MOBILE_L). | | isTabletS | boolean | Exactly small tablet (TABLET_S). | | isTabletM | boolean | Exactly medium tablet (TABLET_M). | | isTabletL | boolean | Exactly large tablet (TABLET_L). | | isLaptop | boolean | Exactly laptop (LAPTOP). | | isDesktop | boolean | Any desktop (DESKTOP). | | isTV | boolean | Exactly TV (TV). | | isTV4K | boolean | Exactly 4K TV (TV_4K). |

Also export:

export enum DEVICE_TYPE {
  MOBILE_S,
  MOBILE_M,
  MOBILE_L,
  TABLET_S,
  TABLET_M,
  TABLET_L,
  LAPTOP,
  DESKTOP,
  TV,
  TV_4K,
}

export const BREAKPOINTS = {
  MOBILE_S_MAX_WIDTH: number,
  MOBILE_MAX_WIDTH: number,
  TABLET_S_MAX_WIDTH: number,
  TABLET_M_MAX_WIDTH: number,
  TABLET_L_MAX_WIDTH: number,
  LAPTOP_MAX_WIDTH: number,
  DESKTOP_MAX_WIDTH: number,
  TV_MAX_WIDTH: number,
};

Contributing

1. Fork the repo
2. Create a feature branch (git checkout -b feat/your-feature)
3. Commit your changes (git commit -m "feat: add ...")
4. Push to your branch (git push origin feat/your-feature)
5. Open a Pull Request

Please follow the Conventional Commits standard.

License

MIT © Valentin Röhle