useMediaQuery

React hook for detecting the device type and dimensions.

Installation

npm install @mvdlei/hooks

Example

Usage

import React from "react";
import { useMediaQuery } from "@mvdlei/hooks";
 
const MyComponent = () => {
  const { device, width, height, isMobile, isTablet, isDesktop } = useMediaQuery();
 
  return (
    <div>
      <p>Device Type: {device}</p>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
      <p>Is Mobile: {isMobile.toString()}</p>
      <p>Is Tablet: {isTablet.toString()}</p>
      <p>Is Desktop: {isDesktop.toString()}</p>
    </div>
  );
};

Reference

useMediaQuery(): {
  device: "mobile" | "tablet" | "desktop" | null;
  width: number | null;
  height: number | null;
  isMobile: boolean;
  isTablet: boolean;
  isDesktop: boolean;
};

Return Value

An object containing the detected device type, width, height, and boolean values indicating if it's mobile, tablet, or desktop.

use-media-query.ts