Skip to content

Instantly share code, notes, and snippets.

@akbarjondev
Created January 11, 2023 10:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save akbarjondev/086f8fd6459a1cd8e3f96dd771d872ce to your computer and use it in GitHub Desktop.
Save akbarjondev/086f8fd6459a1cd8e3f96dd771d872ce to your computer and use it in GitHub Desktop.
Get true (boolean value) when screen reaches given screen size
import { useCallback, useState, useEffect } from 'react'
export function useScreenSize(screenSize: number): boolean[] {
const [isActive, setIsActive] = useState<boolean>(false)
const handleScreenResize = useCallback(() => {
const isActive = window.matchMedia(`(min-width: ${screenSize}px)`)
setIsActive(isActive.matches)
}, [setIsActive, screenSize])
useEffect(() => {
handleScreenResize()
window.addEventListener('resize', handleScreenResize)
return () => window.removeEventListener('resize', handleScreenResize)
}, [handleScreenResize])
return [isActive]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment