useMediaQuery

Hook to handle CSS mediaQuery. It returns an object with matches and media properties and receives an optional onChange function to handle MediaQueryListEvent change event.

Demo

INFO

The component uses useMediaQuery hook to detect color-scheme and displays result.

Loading demo…

Show source code

import { useMediaQuery } from "../../../.."

export const UseMediaQuery = () => {
	const mediaQuery = useMediaQuery('(prefers-color-scheme: dark)');

	return <div style={{textAlign: "left"}}>
		<p>
			Color-scheme: {mediaQuery.matches ? "dark" : "light"}
		</p>
		<p>
			Media matched: {mediaQuery.media}
		</p>
	</div>
}

Types

UseMediaQueryProps

Props accepted by useMediaQuery.

Property	Type	Required	Description
mediaQuery	string	✓	media query to test.
onChange	(evt: MediaQueryListEvent) => void		MediaQueryListEvent change handler.

UseMediaQueryResult

Result object returned by useMediaQuery.

Property	Type	Required	Description
matches	boolean	✓	true when the CSS media query currently matches; false otherwise. Re-evaluated whenever the match state changes (component re-renders).
media	string	✓	The serialised form of the evaluated media query string (e.g. "(max-width: 768px)"), as reported by MediaQueryList.media.