@zenithui/utils
Version:
A collection of utility functions and hooks to simplify development in the ZenithUI ecosystem.
27 lines (26 loc) • 1.19 kB
TypeScript
/** Hook options. */
type UseMediaQueryOptions = {
/**
* The default value to return if the hook is being run on the server.
* @default false
*/
defaultValue?: boolean;
/**
* If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
* @default true
*/
initializeWithValue?: boolean;
};
/**
* Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
* @param {string} query - The media query to track.
* @param {?UseMediaQueryOptions} [options] - The options for customizing the behavior of the hook (optional).
* @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
* @example
* ```tsx
* const isSmallScreen = useMediaQuery('(max-width: 600px)');
* // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
* ```
*/
export default function useMediaQuery(query: string, { defaultValue, initializeWithValue, }?: UseMediaQueryOptions): boolean;
export {};