Device Detection Utility

This utility provides a React Context and a custom hook to detect the device type (mobile, tablet, laptop, desktop) based on screen width.

Installation

npm install @does-interactive/utils
# or
yarn add @does-interactive/utils

API

DeviceProvider

The DeviceProvider is a React component that wraps your application or a part of it to provide device type information to its children.

Props

• children: React.ReactNode - The child components that will have access to the device type.
• breakpoints: object - An object defining the maximum width for each device type.
  • mobile: number (required) - Maximum width for mobile devices.
  • tablet: number (required) - Maximum width for tablet devices.
  • laptop: number (required) - Maximum width for laptop devices.

Example Usage

import React from 'react';
import { DeviceProvider } from '@does-interactive/utils';
import AppContent from './AppContent'; // Your main application content

const breakpoints = {
  mobile: 768,
  tablet: 1024,
  laptop: 1440,
};

function App() {
  return (
    <DeviceProvider breakpoints={breakpoints}>
      <AppContent />
    </DeviceProvider>
  );
}

export default App;

useDeviceType

useDeviceType is a custom React hook that consumes the DeviceContext and returns the current device type as a string.

Return Value

• string | null: The current device type ('mobile', 'tablet', 'laptop', 'desktop') or null if the initial detection hasn't occurred yet.

Important

useDeviceType must be used within a component that is a descendant of DeviceProvider. Otherwise, it will throw an error.

Example Usage

import React from 'react';
import { useDeviceType } from '@does-interactive/utils';

function MyComponent() {
  const deviceType = useDeviceType();

  if (deviceType === 'mobile') {
    return <p>This is a mobile view.</p>;
  }

  if (deviceType === 'tablet') {
    return <p>This is a tablet view.</p>;
  }

  return <p>This is a desktop or laptop view. Current type: {deviceType}</p>;
}

export default MyComponent;

How it Works

The DeviceProvider listens to window resize events. When the component mounts or the window is resized, it calculates the current window.innerWidth and compares it against the provided breakpoints.

• If width <= breakpoints.mobile, the type is 'mobile'.
• Else if width <= breakpoints.tablet, the type is 'tablet'.
• Else if width <= breakpoints.laptop, the type is 'laptop'.
• Otherwise, the type is 'desktop'.

The determined device type is then stored in the DeviceContext, which useDeviceType can access.

License

MIT