mirror of
https://github.com/vector-im/element-call.git
synced 2024-11-27 00:48:06 +08:00
29 lines
825 B
TypeScript
29 lines
825 B
TypeScript
/*
|
|
Copyright 2023, 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { useCallback, useMemo, useState } from "react";
|
|
|
|
import { useEventTarget } from "./useEvents";
|
|
|
|
/**
|
|
* React hook that tracks whether the given media query matches.
|
|
*/
|
|
export function useMediaQuery(query: string): boolean {
|
|
const mediaQuery = useMemo(() => window.matchMedia(query), [query]);
|
|
|
|
const [numChanges, setNumChanges] = useState(0);
|
|
useEventTarget(
|
|
mediaQuery,
|
|
"change",
|
|
useCallback(() => setNumChanges((n) => n + 1), [setNumChanges]),
|
|
);
|
|
|
|
// We want any change to the update counter to trigger an update here
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
return useMemo(() => mediaQuery.matches, [mediaQuery, numChanges]);
|
|
}
|