useDeviceType

Setup

Install the following dependencies:

Install the necessary dependencies using your preferred package manager:

npm i react-responsive

Setup hook

Create a new file called useDeviceType.ts in your hooks directory: hooks/useDeviceType.ts

import { useMediaQuery } from "react-responsive";
 
const useDeviceType = () => {
  const isMobile = useMediaQuery({ maxWidth: 639, minWidth: 200 });
  const isTablet = useMediaQuery({ minWidth: 640, maxWidth: 1023 });
  const isDesktop = useMediaQuery({ minWidth: 1024 });
 
  return { isMobile, isTablet, isDesktop };
};
 
export default useDeviceType;

Usage

Import the hook

import { useDeviceType } from "./hooks/useDeviceType";

Use the hook

const { isMobile, isTablet, isDesktop } = useDeviceType();

useDeviceType

Setup

Install the following dependencies:

Setup hook

Usage

Import the hook

Use the hook

On this page