Implement a useMediaQuery hook that subscribes to and responds to media query changes (e.g. screen size, resolution, orientation, etc.).

Examples

export default function Component() {
  const isSmallDevice = useMediaQuery('only screen and (max-width: 768px)');

  return <div>{isSmallDevice && <a href="#">Menu</a>}</div>;
}

Hint: The window.matchMedia API is helpful.

Arguments

• query: string: The media query to match. It must be a valid CSS media query string

Returns

The hook returns a boolean value that indicates whether the media query matches.

Notes

• The initial return value should come from window.matchMedia(query).matches.
• Subscribe to the current query's change event and update state when it changes.
• If query changes, unsubscribe from the old MediaQueryList and subscribe to the new one.
• You do not need a separate resize listener.