@thibault.sh/hooks/dist/useMediaQuery.d.ts

A comprehensive collection of React hooks for browser storage, UI interactions, and more

/**
 * Hook that tracks the state of a CSS media query and updates when it changes.
 *
 * Provides a reactive way to respond to viewport changes, screen sizes, or any
 * CSS media query conditions in your React components.
 *
 * @param query - The CSS media query string to track (e.g., "(min-width: 768px)")
 *
 * @returns Boolean indicating whether the media query currently matches
 *
 * @example
 * ```tsx
 * function ResponsiveComponent() {
 *   const isMobile = useMediaQuery('(max-width: 768px)');
 *   const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
 *   const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 *
 *   return (
 *     <div>
 *       {isMobile && <MobileLayout />}
 *       {isTablet && <TabletLayout />}
 *       {isDarkMode ? <DarkTheme /> : <LightTheme />}
 *     </div>
 *   );
 * }
 * ```
 *
 * @see https://thibault.sh/hooks/use-media-query
 */
declare const useMediaQuery: (query: string) => boolean;

export { useMediaQuery };