the-react-hooks
HooksuseMediaQuery

useMediaQuery()

The useMediaQuery() hook allows you to programmatically check if the current viewport matches a specific CSS media query string.

Import

typescript
import { useMediaQuery } from 'the-react-hooks';

Usage

Match state for (min-width: 768px)
False (Mobile)
Component.tsx
import { useMediaQuery } from 'the-react-hooks';

export const Component = () => {
  const isDesktop = useMediaQuery('(min-width: 768px)');

  return (
    <div>
      <p>Is Desktop: {isDesktop ? 'Yes' : 'No'}</p>
    </div>
  );
}

API

Arguments

  • query – string The CSS media query string to parse and match (e.g., '(min-width: 768px)').

Returns

  • matches – boolean Returns true if the document currently matches the media query.
PrevioususeLongPressNextuseMount