use-screen

Custom React hook for screen and device information

Install

npm install use-screen

Or with yarn:

yarn add use-screen

Usage

import useScreen from 'use-screen';

const { isMobile, isWideScreen, screenWidth } = useScreen();

// use screen width and other variables as you like

See the website to see how it works: https://alioguzhan.github.io/use-screen/

There is also a working live example as a sandbox:

Return Value

interface State {
  isMobile: boolean; // < 768px
  isTablet: boolean; // < 1280px
  isComputer: boolean; // > 1280px
  isLargeScreen: boolean; // < 1920px
  isWideScreen: boolean; // > 1920px
  screenWidth: number; // current screen width (innerWidth)
  screenHeight: number; // current screen height (innerHeight)
}

License

MIT © alioguzhan