useMediaQuery

import { useMediaQuery } from '@base-ui/react/unstable-use-media-query';

function useMediaQuery(
  query: string,
  options: useMediaQuery.Options
): boolean

interface UseMediaQueryOptions {
  defaultMatches?: boolean | undefined;
  matchMedia?: typeof window.matchMedia | undefined;
  noSsr?: boolean | undefined;
  ssrMatchMedia?: ((query: string) => { matches: boolean }) | undefined;
}

import { useMediaQuery } from '@base-ui/react/unstable-use-media-query';

function MyComponent() {
  const isMobile = useMediaQuery('(max-width: 768px)', {
    defaultMatches: false,
  });
  
  return (
    <div>
      {isMobile ? 'Mobile view' : 'Desktop view'}
    </div>
  );
}

import { useMediaQuery } from '@base-ui/react/unstable-use-media-query';

function MyComponent() {
  const isWide = useMediaQuery('(min-width: 1200px)', {
    defaultMatches: false,
    ssrMatchMedia: (query) => ({
      matches: query.includes('1200px'),
    }),
  });
  
  return <div>{isWide ? 'Wide layout' : 'Normal layout'}</div>;
}

import { useMediaQuery } from '@base-ui/react/unstable-use-media-query';

function MyComponent() {
  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)', {
    noSsr: true,
  });
  
  return <div className={prefersDark ? 'dark' : 'light'}>Content</div>;
}