alioguzhan / use-screen

Custom React hook for screen and device information

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

use-screen's Issues

v2

It's been a long time since this hook was released and it is time to do some updates and upgrades.

• upgrade dependencies
• add a shell.nix file
• replace standard-version with release-please
• deploy via GitHub Actions (via release-please)
• deprecate old node versions
• revisit tests
• integrate husky, lint-staged and commitlint
• update breakpoints
• use vite or microbundle (no need for rollup)
• Allow custom breakpoints ?