@carbon/react/es/internal/useMatchMedia.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { useEffect, useState } from "react";
//#region src/internal/useMatchMedia.ts
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Listens to changes in a media query and returns whether it matches.
* @param mediaQuery - The media query to listen to. For example, `(min-width: 600px)`.
* @param defaultState - The initial state to return before the media query is evaluated. Defaults to `false`.
* @returns Whether the media query matches.
*/
const useMatchMedia = (mediaQuery, defaultState = false) => {
	const [matches, setMatches] = useState(defaultState);
	useEffect(() => {
		const listener = (event) => {
			setMatches(event.matches);
		};
		const mediaQueryList = window.matchMedia(mediaQuery);
		mediaQueryList.addEventListener("change", listener);
		setMatches(mediaQueryList.matches);
		return () => {
			mediaQueryList.removeEventListener("change", listener);
		};
	}, [mediaQuery]);
	return matches;
};
//#endregion
export { useMatchMedia };