https://github.com/alioguzhan/use-screen

Custom React hook for screen and device information
https://github.com/alioguzhan/use-screen

hooks react responsive screen

Last synced: 3 months ago
JSON representation

Custom React hook for screen and device information

• Host: GitHub
• URL: https://github.com/alioguzhan/use-screen
• Owner: alioguzhan
• License: mit
• Created: 2019-10-29T12:46:17.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-06-18T17:55:38.000Z (7 months ago)
• Last Synced: 2024-10-24T11:49:38.402Z (3 months ago)
• Topics: hooks, react, responsive, screen
• Language: TypeScript
• Homepage: https://alioguzhan.github.io/use-screen/
• Size: 816 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-screen

[![FreePalestine.Dev](https://freepalestine.dev/header/1)](https://freepalestine.dev)

> Custom React hook for screen and device information

[![NPM](https://img.shields.io/npm/v/use-screen.svg)](https://www.npmjs.com/package/use-screen)

[![npm](https://img.shields.io/npm/dm/use-screen.svg)](https://www.npmjs.com/package/use-screen)

[![codecov](https://codecov.io/gh/alioguzhan/use-screen/branch/master/graph/badge.svg?token=htwLgAlLBc)](https://codecov.io/gh/alioguzhan/use-screen)

[![Github](https://github.com/alioguzhan/use-screen/workflows/build/badge.svg)](https://github.com/alioguzhan/use-screen/actions)

[![FreePalestine.Dev](https://freepalestine.dev/badge?t=d&u=0&r=1)](https://freepalestine.dev)

## Install

```bash

npm install use-screen

```

Or with yarn:

```bash

yarn add use-screen

```

## Usage

```js

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/](https://alioguzhan.github.io/use-screen/)

There is also a working live example as a sandbox:

[![Edit use-screen-hook](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-screen-hook-80toq?fontsize=14&hidenavigation=1&theme=dark)

## Return Value

```ts

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](https://github.com/alioguzhan)