React hook to get device details!

In this post, we'll create a custom hook to retrieve device-related information in a React or Next.js project. While it will be minimal, it will provide you with the essential data needed to manage your application's functionality and UI effectively.

• About code pool
• When to use?
• Device Details Hook

I decided to create a reusable collection of bare UI components and generic functions that I believe can be more useful—if not better—than a standard starter kit. While a starter kit may fit all your needs in every aspect, this is often rare. In most cases, you will encounter many unnecessary modules, and over time, you might find the structure too rigid to implement your desired changes and patterns.

With the SOC (Separation of Concerns) convention in mind, we will enhance our assets and confidently create a starter for our project in no time by selecting only the usable components and utilities!

I definitely believe that re-inventing the wheel isn't wise, but relying solely on an all-in-one solution can limit your ability to identify and solve problems. I think it's important to strike a balance between using ready-to-use assets and creating your own solutions, as this approach can help you improve your skills over time. Consider each module in the "code pool" series as a wheel that is functional and open to improvements and customizations!

You can use this hook in both React and Next.js projects. However, keep in mind that in Next.js, you'll need to add the use client directive at the beginning of the module. This utility is especially useful if you need to render different UI elements or run specific functions based on the device type and its attributes.

Here’s a hook to retrieve device information in React or Next.js. You can customize it by adding, removing, or modifying methods to suit your needs!

 import { useState, useEffect, useMemo, useCallback } from 'react';
 
 const getDeviceInfo = () => {
   const ua = navigator.userAgent;
   const isAndroid = /Android/i.test(ua);
   const isIOS = /iPad|iPhone|iPod/.test(ua);
   const isIpad = /iPad/.test(ua);
   const isMobile = isAndroid || isIOS;
   const isTablet = isIpad || (isAndroid && !/Mobile/.test(ua));
   
   return { isAndroid, isIOS, isIpad, isMobile, isTablet };
 };
 
 export const useDeviceDetails = () => {
   const [dimensions, setDimensions] = useState(() => ({
     width: window.innerWidth,
     height: window.innerHeight
   }));
 
   const handleResize = useCallback(() => {
     setDimensions({
       width: window.innerWidth,
       height: window.innerHeight
     });
   }, []);
 
   useEffect(() => {
     window.addEventListener('resize', handleResize, { passive: true });
     return () => window.removeEventListener('resize', handleResize);
   }, [handleResize]);
 
   const deviceInfo = useMemo(() => {
     const { width, height } = dimensions;
     const { isAndroid, isIOS, isIpad, isMobile, isTablet } = getDeviceInfo();
     
     return {
       isMobile,
       isAndroid,
       isIOS,
       isIpad,
       isTablet,
       isDesktop: !isMobile && !isTablet,
       orientation: width > height ? 'landscape' : 'portrait',
       isLandscape: width > height,
       isPortrait: height > width,
       aspectRatio: width / height,
       pixelRatio: window.devicePixelRatio || 1,
       touchSupport: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
       screenWidth: window.screen.width,
       screenHeight: window.screen.height,
       width,
       height
     };
   }, [dimensions]);
 
   return deviceInfo;
 };

This hook will return various details about the device. To use it, simply call the useDeviceDetails() hook and destructure the returned values.

Here’s a breakdown of the output:

• isMobile: Indicates whether the device is a mobile device.
• isAndroid: Indicates whether the mobile device runs on Android.
• isIOS: Indicates whether the mobile device runs on iOS.
• isIpad: Indicates whether the device is an iPad.
• isTablet: Indicates whether the device is a tablet.
• isDesktop: Indicates whether the device is a desktop.
• orientation: Returns 'landscape' or 'portrait' based on width vs. height.
• isLandscape: A boolean indicating if the width is greater than the height.
• isPortrait: A boolean indicating if the height is greater than the width.
• aspectRatio: The ratio of width to height.
• pixelRatio: The device’s pixel density (window.devicePixelRatio).
• touchSupport: A boolean indicating if the device supports touch input.
• screenWidth: The physical screen width in pixels.
• screenHeight: The physical screen height in pixels.
• width: The current viewport width.
• height: The current viewport height.