useIsTablet

sensors

Installation

npx usehooks-cli@latest add use-is-tablet

Description

A React hook for detecting tablet devices using media queries, user agent detection, and touch capability checks. Provides real-time updates when the device orientation or window size changes.

Return Type

UseIsTabletReturn

Property	Type	Description
isTablet	boolean	Whether the current device is detected as a tablet
isLoading	boolean	Whether the hook is still determining the device type

Examples

Basic Tablet Detection

Simple tablet device detection

const { isTablet, isLoading } = useIsTablet();

if (isLoading) {
  return <div>Detecting device...</div>;
}

return (
  <div>
    <p>Device type: {isTablet ? 'Tablet' : 'Not Tablet'}</p>
    {isTablet ? (
      <TabletOptimizedLayout />
    ) : (
      <StandardLayout />
    )}
  </div>
);

Responsive Grid

Adjust grid layout based on tablet detection

const { isTablet } = useIsTablet();

return (
  <div 
    className={`grid ${
      isTablet ? 'grid-cols-2 gap-4' : 'grid-cols-1 gap-2'
    }`}
  >
    {items.map(item => (
      <Card key={item.id} item={item} />
    ))}
  </div>
);

Dependencies

react

Notes

•Uses media query (769px - 1024px) as primary detection method
•Includes user agent detection for tablet-specific devices
•Special handling for iPad detection (including newer iPads that report as desktop)
•Considers touch capability as additional detection factor
•Automatically updates when window is resized or orientation changes

Implementation

'use client';

import { useState, useEffect } from "react";

interface UseIsTabletReturn {
  isTablet: boolean;
  isLoading: boolean;
}

export const useIsTablet = (): UseIsTabletReturn => {
  const [isTablet, setIsTablet] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const checkIsTablet = () => {
      // Check using media query for tablet range
      const tabletQuery = window.matchMedia(
        "(min-width: 769px) and (max-width: 1024px)"
      );
      
      // Check using user agent for tablet-specific devices
      const userAgent = navigator.userAgent.toLowerCase();
      const tabletKeywords = [
        'ipad', 'tablet', 'kindle', 'silk', 'playbook', 'nexus 7',
        'nexus 9', 'nexus 10', 'galaxy tab', 'sm-t', 'gt-p', 'gt-n'
      ];
      
      const isTabletUA = tabletKeywords.some(keyword => 
        userAgent.includes(keyword)
      );
      
      // Additional check for iPad (which might report as desktop in some cases)
      const isIPad = /ipad|macintosh/.test(userAgent) && 'ontouchend' in document;
      
      // Combine checks - media query + user agent + touch capability
      const isTabletDevice = tabletQuery.matches || 
        isTabletUA || 
        isIPad ||
        (window.innerWidth >= 769 && window.innerWidth <= 1024 && 'ontouchstart' in window);
      
      setIsTablet(isTabletDevice);
      setIsLoading(false);
    };

    // Initial check
    checkIsTablet();

    // Listen for media query changes
    const tabletQuery = window.matchMedia(
      "(min-width: 769px) and (max-width: 1024px)"
    );
    const handleChange = () => checkIsTablet();
    
    if (tabletQuery.addEventListener) {
      tabletQuery.addEventListener('change', handleChange);
    } else {
      // Fallback for older browsers
      tabletQuery.addListener(handleChange);
    }

    // Listen for window resize
    window.addEventListener('resize', checkIsTablet);

    return () => {
      if (tabletQuery.removeEventListener) {
        tabletQuery.removeEventListener('change', handleChange);
      } else {
        tabletQuery.removeListener(handleChange);
      }
      window.removeEventListener('resize', checkIsTablet);
    };
  }, []);

  return {
    isTablet,
    isLoading,
  };
};

export default useIsTablet;

useIsMobile

CLI Docs All Hooks

useMediaSession