Use-screen NPM

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

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)
}