62 lines
1.6 KiB
TypeScript
Executable file
62 lines
1.6 KiB
TypeScript
Executable file
import { useState, useEffect } from 'react';
|
|
|
|
/**
|
|
* Hook for responsive design with media queries
|
|
*
|
|
* Tracks whether a media query matches and updates on window resize.
|
|
* Returns false during SSR.
|
|
*
|
|
* @param query - CSS media query string
|
|
* @returns Boolean indicating if the media query matches
|
|
*
|
|
* @example
|
|
* ```typescript
|
|
* function ResponsiveComponent() {
|
|
* const isMobile = useMediaQuery('(max-width: 768px)');
|
|
* const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
|
|
* const isDesktop = useMediaQuery('(min-width: 1025px)');
|
|
* const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
|
*
|
|
* return (
|
|
* <div>
|
|
* {isMobile && <MobileLayout />}
|
|
* {isTablet && <TabletLayout />}
|
|
* {isDesktop && <DesktopLayout />}
|
|
* </div>
|
|
* );
|
|
* }
|
|
* ```
|
|
*/
|
|
export function useMediaQuery(query: string): boolean {
|
|
const [matches, setMatches] = useState<boolean>(() => {
|
|
if (typeof window === 'undefined') {
|
|
return false;
|
|
}
|
|
return window.matchMedia(query).matches;
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const mediaQuery = window.matchMedia(query);
|
|
|
|
// Update matches state
|
|
const handleChange = (e: MediaQueryListEvent) => {
|
|
setMatches(e.matches);
|
|
};
|
|
|
|
// Set initial value
|
|
setMatches(mediaQuery.matches);
|
|
|
|
// Listen for changes
|
|
mediaQuery.addEventListener('change', handleChange);
|
|
|
|
return () => {
|
|
mediaQuery.removeEventListener('change', handleChange);
|
|
};
|
|
}, [query]);
|
|
|
|
return matches;
|
|
}
|