Detecting and Adapting to Device Types in React with Custom Hooks through matchMedia api

#react #javascript #hooks #ui

In the world of web development, creating responsive and adaptive user interfaces is crucial. Ensuring that your website or web application looks & functions well across various devices, from mobile phones to desktop computers, is a basic requirement.

import { useState, useEffect } from 'react';


const useDeviceType = () => {
  const [deviceType, setDeviceType] = useState(null);

  // Define constants for media queries
  const MEDIA_QUERIES = {
    MOBILE: '(max-width: 767px)',
    TABLET: '(min-width: 768px) and (max-width: 1023px)',
    LAPTOP: '(min-width: 1024px) and (max-width: 1439px)',
    DESKTOP: '(min-width: 1440px)',
  };

  useEffect(() => {