React Responsive Hook

gistfile1.txt

import { useState, useEffect } from 'react';

export enum DeviceEnum
{
    Desktop,
    Tablet,
    Mobile
}

export function useDevice()
{
    const [device, setDevice] = useState<DeviceEnum>();

    useEffect(() =>
    {
        handleResize();
    }, []);

    useEffect(() =>
    {
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    function handleResize()
    {
        // If width greater than tablet
        if (window.innerWidth > 979)
        {
            return setDevice(DeviceEnum.Desktop);
        }

        // If width greater than mobile
        if (window.innerWidth > 500)
        {
            return setDevice(DeviceEnum.Tablet);
        }

        return setDevice(DeviceEnum.Mobile);
    }

    return {
        desktop: device === DeviceEnum.Desktop,
        tablet: device === DeviceEnum.Tablet,
        mobile: device === DeviceEnum.Mobile
    };
}