useMediaQuery

Tracks whether a CSS media query matches and re-renders on change. SSR-safe — returns defaultState (default false) on the server, so it never touches window.matchMedia before hydration

(min-width: 768px) → no match ❌

Resize the window across 768 px — the value updates live, with no hydration warning.


import { useMediaQuery } from 'react-stateful-hooks';
 
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
const isWide = useMediaQuery('(min-width: 1024px)');

Signature


const matches = useMediaQuery(query: string, defaultState?: boolean): boolean;