Bug and potential changes?

[karland]

Hi, your library is rather nice. Thank you for the effort.

For my own purposes, I have made some (API and param) changes and wonder if you would be interested? I know, these are big changes. So, feel free to close.

1. This seems to be a bug: it should read width instead of height as your are in landscape mode:
   https://github.com/applike/responsive-react/blob/eb601c0aa78492f359d387bd0291d43a252a94f5/src/utilResponsive.js#L64-L65

2. In the README.md under ### Approach 2 and ### Additional helper function I suggest to
   import {...} from "react-responsive".

3. I added constants

export const PORTRAIT = "PORTRAIT"
export const LANDSCAPE = "LANDSCAPE"
export const MOBILE = "MOBILE"
export const MOBILE_SMALL = "MOBILE_SMALL"
export const MOBILE_MEDIUM = "MOBILE_MEDIUM"
export const MOBILE_LARGE = "MOBILE_LARGE"
export const TABLET = "TABLET"
export const IPAD_PRO = "IPAD_PRO"
export const LAPTOP = "LAPTOP"
export const LAPTOP_SMALL = "LAPTOP_SMALL"
export const LAPTOP_MEDIUM = "LAPTOP_MEDIUM"
export const LARGE_SCREEN = "LARGE_SCREEN"
export const SUPER_LARGE_SCREEN = "SUPER_LARGE_SCREEN"

4. Update screen sizes of smartphones and take acount of laptops with 1920:

export const DeviceWidthObject = {
 // MobileSmall: { max: 320, min: 0 },
 MOBILE_SMALL: { max: 480, min: 0 }, // e.g. iPhone4
 // MobileMedium: { max: 375, min: 321 },
 MOBILE_MEDIUM: { max: 640, min: 481 }, // e.g. iPhone5
 MOBILE_LARGE: { max: 767, min: 641 }, // e.g. Pixel 2, iPhone X
 TABLET: { max: 991, min: 768 },
 LAPTOP_SMALL: { max: 1024, min: 992 },
 // LaptopLarge: { max: 1440, min: 1025 },
 LAPTOP_MEDIUM: { max: 1440, min: 1025 },
 // LargerThanLaptop: { max: 2560, min: 1441 },
 LARGE_SCREEN: { max: 2560, min: 1441 },
 SUPER_LARGE_SCREEN: { max: 999999, min: 2561 }
}

5. You can save 1/3 of the code in utilResponsive.js if you always virtually swap the device into landscape mode to determine its size.

6. I have made boolean values. e.g. isMobileDevice, boolean and not a function

export const isMobileDevice = (() => {
 const deviceInformation = getDeviceTypeInfo()
 return deviceInformation.deviceType === "Mobile"
})()

7. OPTIONAL: Added some additional precision booleans:

import {
 LANDSCAPE,
 LAPTOP_SMALL,
 LAPTOP_MEDIUM,
 LARGE_SCREEN,
 SUPER_LARGE_SCREEN,
 MOBILE_SMALL,
 MOBILE_MEDIUM,
 MOBILE_LARGE,
 TABLET,
 IPAD_PRO,
 getDeviceTypeInfo
} from "./utilResponsive"

const sizeDevice = () => {
 const { deviceTypeVariant: deviceType, orientation } = getDeviceTypeInfo()
 const isLandscape = orientation === LANDSCAPE
 const isPortrait = !isLandscape
 const isSmartphoneSmall = deviceType === MOBILE_SMALL
 const isSmartphoneMedium = deviceType === MOBILE_MEDIUM
 const isSmartphoneLarge = deviceType === MOBILE_LARGE

 const isMaxSmartphone =
 isSmartphoneSmall || isSmartphoneMedium || isSmartphoneLarge

 const isSuperLargeScreen = deviceType === SUPER_LARGE_SCREEN

 const isMinLargeScreen = deviceType === LARGE_SCREEN || isSuperLargeScreen

 const isMinLaptop =
 deviceType === LAPTOP_SMALL ||
 deviceType === LAPTOP_MEDIUM ||
 isMinLargeScreen

 const isMinTablet =
 deviceType === TABLET || deviceType === IPAD_PRO || isMinLaptop

 const isMinSmartphoneLarge = isSmartphoneLarge || isMinLaptop
 const isMinSmartphoneMedium = isSmartphoneMedium || isSmartphoneLarge

 return {
 isPortrait,
 isLandscape,
 isSmartphoneSmall,
 isSmartphoneMedium,
 isSmartphoneLarge,
 isMaxSmartphone,
 isMinSmartphoneMedium,
 isMinSmartphoneLarge,
 isMinTablet,
 isMinLaptop,
 isMinLargeScreen,
 isSuperLargeScreen
 }
}

What do you think?