@restart/hooks
Version:
A set of utility and general-purpose React hooks.
21 lines (20 loc) • 756 B
TypeScript
/**
* Match a media query and get updates as the match changes. The media string is
* passed directly to `window.matchMedia` and run as a Layout Effect, so initial
* matches are returned before the browser has a chance to paint.
*
* ```tsx
* function Page() {
* const isWide = useMediaQuery('min-width: 1000px')
*
* return isWide ? "very wide" : 'not so wide'
* }
* ```
*
* Media query lists are also reused globally, hook calls for the same query
* will only create a matcher once under the hood.
*
* @param query A media query
* @param targetWindow The window to match against, uses the globally available one as a default.
*/
export default function useMediaQuery(query: string | null, targetWindow?: Window | undefined): boolean;