06d8f81401
* pull changes from docs-playground * cleanup, add callout banner * cleanup linting and test fixes * add discussion link Co-authored-by: James M. Greene <JamesMGreene@github.com>
29 lines
608 B
TypeScript
29 lines
608 B
TypeScript
import { useState, useEffect } from 'react'
|
|
|
|
export function useMediaQuery(query: string) {
|
|
const [state, setState] = useState(
|
|
typeof window !== 'undefined' ? window.matchMedia(query).matches : false
|
|
)
|
|
|
|
useEffect(() => {
|
|
let mounted = true
|
|
const mql = window.matchMedia(query)
|
|
const onChange = () => {
|
|
if (!mounted) {
|
|
return
|
|
}
|
|
setState(!!mql.matches)
|
|
}
|
|
|
|
mql.addEventListener('change', onChange)
|
|
setState(mql.matches)
|
|
|
|
return () => {
|
|
mounted = false
|
|
mql.removeEventListener('change', onChange)
|
|
}
|
|
}, [query])
|
|
|
|
return state
|
|
}
|