tsaffi / use-screen-size Goto Github PK

View Code? Open in Web Editor NEW

This is a React Hook that helps you write conditional code based on screen size, get the screen size value etc using plain Javascript.

HTML 39.18% TypeScript 51.67% CSS 9.15%

use-screen-size's Introduction

use-screen-size

This helps you write conditional code based on screen size, or get the screen size value

Install

npm install --save use-screen-size

yarn add use-screen-size

Example

This shows a quick example of displaying your screen width, screen height and current screen mode

import React from 'react'

import useScreenSize from 'use-screen-size'

const App = () => {
  const size = useScreenSize()

  return (
    <>
      <h1>
        {size.width}px / {size.height}px
      </h1>
      <h1>{size.screen}</h1>
    </>
  )
}

Helpful Methods

size.screen is used to get the quick current size mode of the screen

Name	Size	property
Extra small	<576px	xs
Small	≥576px	s
Medium	≥768px	m
Large	≥992px	l
Large	≥1200px	xl

size.width its is used to get the width of the screen in pixels
size.height its is used to get the height of the screen in pixels

Advanced Example

This shows an advanced example of running conditional actions based on the screen size

import React, { useState, useEffect } from 'react'

import useScreenSize, { ScreenSize } from 'use-screen-size'

const App = () => {
  const size = useScreenSize()
  const [color, setColor] = useState('')
  const [screenSize, setScreenSize] = useState('')

  useEffect(() => {
    if (size.screen == ScreenSize.xs) {
      setColor('red')
      setScreenSize('Extra Small Screen eg Mobile Phones(Portrait Mode)')
    } else if (size.screen === ScreenSize.s) {
      setColor('blue')
      setScreenSize('Small')
      setScreenSize('Small Screen eg Mobile Phones(Landscape Mode)')
    } else if (size.screen === ScreenSize.m) {
      setColor('orange')
      setScreenSize('Medium Screen eg Tablet')
    } else if (size.screen === ScreenSize.l) {
      setColor('yellowgreen')
      setScreenSize('Large Screen eg Laptop, PC')
    } else if (size.screen === ScreenSize.xl) {
      setColor('darkmagenta')
      setScreenSize('Extra Large Screen eg Laptop, PC')
    }
  }, [size])

  return (
    <>
      <h1>
        {size.width}px / {size.height}px
      </h1>
      <h1 style={{ color }}>
        {size.screen.toUpperCase()} {screenSize}
      </h1>
    </>
  )
}