useMediaQuery

A custom hook that works on resize as well, and makes it easy to see the breakdown of the media query string.

Interface

const useMediaQuery: (query: string) => {
    isMatch: boolean;
}

Usage

import { useMediaQuery } from '@devgrace/react';

const Example = () => {
  const { isMatch } = useMediaQuery('(min-width: 768px)');
  
  return (
    <div>
      <p>
        {isMatch
          ? 'The viewport width is less than 768px.'
          : 'The viewport width is greater than or equal to 768px.'}
      </p>
    </div>
  );
};

Try modifying the browser width!

The viewport width is greater than or equal to 768px.