Skip to content
master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

use-screen-size

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

NPM JavaScript Style Guide

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

  1. 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
  1. size.width its is used to get the width of the screen in pixels

  2. 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, { BreakPoint } from 'use-screen-size'

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

  useEffect(() => {
    if (size.screen == BreakPoint.xs) {
      setColor('red')
      setScreenSize('Extra Small Screen eg Mobile Phones(Portrait Mode)')
    } else if (size.screen === BreakPoint.s) {
      setColor('blue')
      setScreenSize('Small Screen eg Mobile Phones(Landscape Mode)')
    } else if (size.screen === BreakPoint.m) {
      setColor('orange')
      setScreenSize('Medium Screen eg Tablet')
    } else if (size.screen === BreakPoint.l) {
      setColor('yellowgreen')
      setScreenSize('Large Screen eg Laptop, PC')
    } else if (size.screen === BreakPoint.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>
    </>
  )
}

License

Follow on Twitter @mrflamez_

MIT © kingflamez

About

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

Resources

Releases

No releases published
You can’t perform that action at this time.