15 lines
496 B
JavaScript
15 lines
496 B
JavaScript
import { useSyncExternalStore } from 'react'
|
|
|
|
// Live boolean for a CSS media query, for the rare layout switch that CSS
|
|
// alone can't do (e.g. rendering a structurally different component tree).
|
|
export function useMediaQuery(query) {
|
|
return useSyncExternalStore(
|
|
(onChange) => {
|
|
const mql = window.matchMedia(query)
|
|
mql.addEventListener('change', onChange)
|
|
return () => mql.removeEventListener('change', onChange)
|
|
},
|
|
() => window.matchMedia(query).matches
|
|
)
|
|
}
|