reactuals/dist/hooks/useDeviceType.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useEffect, useState } from "react";
function getDeviceType(width) {
    if (width < 768)
        return "mobile";
    if (width < 1024)
        return "tablet";
    return "desktop";
}
export function useDeviceType() {
    const [deviceType, setDeviceType] = useState(getDeviceType(window.innerWidth));
    useEffect(() => {
        const handleResize = () => {
            setDeviceType(getDeviceType(window.innerWidth));
        };
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);
    return {
        deviceType,
        isTab: deviceType === "tablet",
        isMobile: deviceType === "mobile",
        isDesktop: deviceType === "desktop",
    };
}