diff options
Diffstat (limited to 'hooks/use-media-query.ts')
| -rw-r--r-- | hooks/use-media-query.ts | 19 |
1 files changed, 19 insertions, 0 deletions
diff --git a/hooks/use-media-query.ts b/hooks/use-media-query.ts new file mode 100644 index 00000000..95e552cd --- /dev/null +++ b/hooks/use-media-query.ts @@ -0,0 +1,19 @@ +import * as React from "react" + +export function useMediaQuery(query: string) { + const [value, setValue] = React.useState(false) + + React.useEffect(() => { + function onChange(event: MediaQueryListEvent) { + setValue(event.matches) + } + + const result = matchMedia(query) + result.addEventListener("change", onChange) + setValue(result.matches) + + return () => result.removeEventListener("change", onChange) + }, [query]) + + return value +} |
