useMediaQuery

A custom hook for easily checking whether a media query string is matched.

Returns a boolean indicating whether the current viewport satisfies the given media query condition. Use defaultValue to specify a fallback value in environments where the media query result cannot be determined (e.g., SSR).

Code

🔗 View source code

Interface

typescript

function useMediaQuery(mediaQueryString: string, defaultValue?: boolean): boolean

Options

Name	Type	Default	Description
mediaQueryString	string	-	A string representing the media query condition (e.g., '(min-width: 768px)')
defaultValue	boolean	false	Fallback value used when the media query result cannot be determined

Usage

typescript

import { useMediaQuery } from '@modern-kit/react';

const Example = () => {
  const isMatch = useMediaQuery('(min-width: 768px)');

  return (
    <div>
      <p>
        {isMatch
          ? 'The viewport width is 768px or wider.'
          : 'The viewport width is less than 768px.'}
      </p>
    </div>
  );
};

Example