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-sizeyarn add use-screen-sizeExample
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.screenis 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.widthits is used to get the width of the screen in pixels -
size.heightits 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