useDevice custom hook

[SamoMelkonyan]

Description

A clear and concise description of what the investigation is.

Additional

Add any other content that might be helpful.

[Ruben-Arushanyan]

@SamoMelkonyan This is my useDevice hook. Which provides stateful device sizes logics.

import { useEffect, useState } from 'react';

const SCREEN_SIZES = {
    EXTRA_SMALL: { min: -Infinity, max: 599 },
    SMALL: { min: 600, max: 767 },
    MEDIUM: { min: 768, max: 991 },
    LARGE: { min: 992, max: 1199 },
    EXTRA_LARGE: { min: 1200, max: Infinity },
};

export const isMatchSize = ({ min = -Infinity, max = Infinity }) => {
    const width = window.innerWidth;
    return width >= min && width <= max;
};

// Extra small devices (phones, 0px - 599px)
export const isExtraSmallScreen = () => isMatchSize(SCREEN_SIZES.EXTRA_SMALL);

// Small devices (portrait tablets and large phones, > 600px - 767)
export const isSmallScreen = () => isMatchSize(SCREEN_SIZES.SMALL);

// Medium devices (landscape tablets, 768px - 991px)
export const isMediumScreen = () => isMatchSize(SCREEN_SIZES.MEDIUM);

// Large devices (laptops/desktops, 992px - 1199px)
export const isLargeScreen = () => isMatchSize(SCREEN_SIZES.LARGE);

// Extra large devices (large laptops and desktops, 1200px - up)
export const isExtraLargeScreen = () => isMatchSize(SCREEN_SIZES.EXTRA_LARGE);

// Medium and up devices (768px - up)
export const isMediumAndUpScreen = () => isMatchSize({ min: SCREEN_SIZES.MEDIUM.min });

// Large and up devices (992px - up)
export const isLargeAndUpScreen = () => isMatchSize({ min: SCREEN_SIZES.LARGE.min });

export const getDeviceInfo = () => {
    return {
        IS_EXTRA_SMALL_SCREEN: isExtraSmallScreen(),
        IS_SMALL_SCREEN: isSmallScreen(),
        IS_MEDIUM_SCREEN: isMediumScreen(),
        IS_LARGE_SCREEN: isLargeScreen(),
        IS_EXTRA_LARGE_SCREEN: isExtraLargeScreen(),
        IS_MEDIUM_AND_UP_SCREEN: isMediumAndUpScreen(),
        IS_LARGE_AND_UP_SCREEN: isLargeAndUpScreen(),
    };
};

const useDevice = () => {
    const [deviceInfo, setDeviceInfo] = useState(getDeviceInfo());

    useEffect(() => {
        const windowResizeHandler = () => setDeviceInfo(getDeviceInfo());
        window.addEventListener('resize', windowResizeHandler);
        return () => window.removeEventListener('resize', windowResizeHandler);
    }, []);

    return deviceInfo;
};

export { useDevice };

[alexkharatyan]

Common device types that are used in popular device packages:

• isBrowser
• isDesktop
• isMobile
• isTablet
• isSmartTV
• isConsole
• isWearable
• isEmbedded
• isMobileSafari
• isChromium
• isMobileOnly
• isAndroid
• isWinPhone
• isIOS
• isChrome
• isFirefox
• isSafari
• isOpera
• isIE
• isEdge
• isYandex
• osVersion
• osName
• isIOS13
• isIPad13
• isIPhone13
• isIPod13
• isElectron
• isEdgeChromium
• isLegacyEdge
• isWindows
• isMacOs
• isMIUI
• isSamsungBrowser
• OsTypes
• BrowserTypes
• ...

[SamoMelkonyan]

React Hook for detect device properties

Device wil have the following properties

• width

• height

• orientation

• isTouchScreen

• isMobile

• isAndroid

• isIOS

• isIE

• isSafari

• isOpera

• isChrome

• isWindows

• isExtraSmallScreen

• isSmallScreen

• isMediumScreen

• isLargeScreen

• isExtraLargeScreen

• isMediumAndUpScreen

• isLargeAndUpScreen

• permission?

Implementation Example

const initialBreakpoints = {
    xs: { min: -Infinity, max: 599 },
    sm: { min: 600, max: 767 },
    md: { min: 768, max: 991 },
    lg: { min: 992, max: 1199 },
    xl: { min: 1200, max: Infinity },
};

const isMatchSize = ({ min = -Infinity, max = Infinity }) => {
    const width = window.innerWidth;
    return width >= min && width <= max;
};

const getDeviceInfo = (breakpoints) => {
    return {
        width: window.innerWidth,
        isSmallScreen: isMatchSize(breakpoints.sm)
        //...
    };
};

const useDevice = (breakpoints = initialBreakpoints) => {
    const [deviceInfo, setDeviceInfo] = useState(getDeviceInfo(breakpoints));

    useEffect(() => {
        const windowResizeHandler = () => setDeviceInfo(getDeviceInfo());
        window.addEventListener('resize', windowResizeHandler);
        return () => window.removeEventListener('resize', windowResizeHandler);
    }, []);

    return deviceInfo;
};

// Do we need to add "throttle"?

In every resize the hook will execute and return a new object with the new properties

Usage

import useDevice from './';

const Component = () => {
  const device = useDevice();

  return (
    <section>...</section>
  );
};

Related packages

https://github.com/redube/useDevice