@scaleway/use-media
v3.0.1
Published
A small hook to track CSS media query state
Downloads
10,934
Readme
@scaleway/use-media
A small hook to track CSS media query state
This library has been forked from use-media, many thanks to the original author, Vadim Dalecky.
Install
$ pnpm add @scaleway/use-media
Usage
With useEffect
import { useMedia } from '@scaleway/use-media'
const App = () => {
// Accepts an object of features to test
const isWide = useMedia({ minWidth: '1000px' })
// Or a regular media query string
const reduceMotion = useMedia('(prefers-reduced-motion: reduce)')
return <div>Screen is wide: {isWide ? '😃' : '😢'}</div>
}
With useLayoutEffect
import { useMediaLayout } from '@scaleway/use-media'
const App = () => {
// Accepts an object of features to test
const isWide = useMediaLayout({ minWidth: '1000px' })
// Or a regular media query string
const reduceMotion = useMediaLayout('(prefers-reduced-motion: reduce)')
return <div>Screen is wide: {isWide ? '😃' : '😢'}</div>
}