| 1 | /**
|
| 2 | * Match a media query and get updates as the match changes. The media string is
|
| 3 | * passed directly to `window.matchMedia` and run as a Layout Effect, so initial
|
| 4 | * matches are returned before the browser has a chance to paint.
|
| 5 | *
|
| 6 | * ```tsx
|
| 7 | * function Page() {
|
| 8 | * const isWide = useMediaQuery('min-width: 1000px')
|
| 9 | *
|
| 10 | * return isWide ? "very wide" : 'not so wide'
|
| 11 | * }
|
| 12 | * ```
|
| 13 | *
|
| 14 | * Media query lists are also reused globally, hook calls for the same query
|
| 15 | * will only create a matcher once under the hood.
|
| 16 | *
|
| 17 | * @param query A media query
|
| 18 | * @param targetWindow The window to match against, uses the globally available one as a default.
|
| 19 | */
|
| 20 | export default function useMediaQuery(query: string | null, targetWindow?: Window | undefined): boolean;
|