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

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(() => {

👉 READ MORE