nice-react-hook-device-detector

A React hook for detecting mobile devices with enhanced debugging capabilities and Chrome DevTools support.

Features

✨ Smart Detection: Multi-layered approach combining user agent, touch capability, and viewport width 🔧 DevTools Support: Enhanced detection for Chrome DevTools mobile emulation 🐛 Debug Mode: Easy testing with localStorage or URL parameter flags 📱 Responsive: Automatically updates on window resize events ⚡ Lightweight: Zero dependencies (except React peer dependency) 🎯 TypeScript: Full TypeScript support with type definitions

Installation

npm install nice-react-hook-device-detector

Quick Start

Using the Hook Directly

import { useDeviceDetector } from 'nice-react-hook-device-detector';

function MyComponent() {
  const isMobile = useDeviceDetector();

  return (
    <div>
      {isMobile ? (
        <MobileView />
      ) : (
        <DesktopView />
      )}
    </div>
  );
}

Using Context Provider (Optional)

For applications that need to share device detection state across multiple components, you can use the Context Provider pattern:

import { DeviceProvider, useDevice } from 'nice-react-hook-device-detector';

// Wrap your app with the provider
function App() {
  return (
    <DeviceProvider>
      <YourAppComponents />
    </DeviceProvider>
  );
}

// Use the hook in any child component
function ChildComponent() {
  const { isMobile } = useDevice();

  return (
    <div>
      {isMobile ? 'Mobile View' : 'Desktop View'}
    </div>
  );
}

API Reference

useDeviceDetector()

A React hook that returns a boolean indicating whether the current device is detected as mobile.

Returns:

• boolean - true if mobile device is detected, false otherwise

Example:

const isMobile = useDeviceDetector();

DeviceProvider

A React Context Provider that shares device detection state across components.

Props:

• children: React.ReactNode - Child components that will have access to the device context

Example:

<DeviceProvider>
  <App />
</DeviceProvider>

useDevice()

A React hook that accesses the device context. Must be used within a DeviceProvider.

Returns:

• { isMobile: boolean } - Object containing the mobile detection state

Throws:

• Error if used outside of DeviceProvider

Example:

const { isMobile } = useDevice();

Detection Logic

The hook uses a comprehensive approach to detect mobile devices:

1. User Agent Detection: Checks for mobile device indicators in the user agent string
2. Touch Capability: Detects if the device supports touch events (ontouchstart or maxTouchPoints)
3. Viewport Width: Considers devices with width ≤ 480px as mobile
4. DevTools Emulation: Special handling for Chrome DevTools mobile emulation (combines touch + small screen)

Debug Mode

For testing and development, you can force mobile detection:

Method 1: localStorage

localStorage.setItem('debug-mobile', 'true');
// Refresh the page or re-render the component

Method 2: URL Parameter

https://yoursite.com?mobile=true

Disable Debug Mode

localStorage.removeItem('debug-mobile');
// Or visit URL without the mobile parameter

Use Cases

• Responsive Components: Show different UI components based on device type
• Touch Interactions: Enable/disable touch-specific features
• Performance Optimization: Load different assets for mobile vs desktop
• User Experience: Adapt navigation, modals, and interactions for mobile users

Examples

Conditional Rendering

import { useDeviceDetector } from 'nice-react-hook-device-detector';

function Navigation() {
  const isMobile = useDeviceDetector();

  return (
    <nav>
      {isMobile ? (
        <MobileMenu />
      ) : (
        <DesktopMenu />
      )}
    </nav>
  );
}

Conditional Styling

import { useDeviceDetector } from 'nice-react-hook-device-detector';
import styled from 'styled-components';

const Container = styled.div<{ isMobile: boolean }>`
  padding: ${props => props.isMobile ? '10px' : '20px'};
  font-size: ${props => props.isMobile ? '14px' : '16px'};
`;

function MyComponent() {
  const isMobile = useDeviceDetector();

  return (
    <Container isMobile={isMobile}>
      Content adapts to device type
    </Container>
  );
}

Feature Toggling

import { useDeviceDetector } from 'nice-react-hook-device-detector';

function App() {
  const isMobile = useDeviceDetector();

  return (
    <div>
      {isMobile && <TouchGestures />}
      {!isMobile && <MouseInteractions />}
      <MainContent />
    </div>
  );
}

Browser Support

• ✅ Chrome/Chromium
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Mobile browsers (iOS Safari, Chrome Mobile, etc.)

Requirements

• React 16.8.0 or higher (hooks support)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Nice Prototypes