@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
29 lines (28 loc) • 955 B
TypeScript
/**
* Checks if the user uses a touch device
*/
export declare const useIsTouchDevice: () => boolean;
/**
* Allows creating a `useIsScreen` hook with provided breakpoints.
* Use `useIsScreen` directly if you just need default Tailwind's screens.
*
* @example
* const useIsScreen = createUseIsScreen({ sm: '560px', lg: "1200px" });
* useIsScreen("sm");
*/
export declare const createUseIsScreen: <TBreakpoints extends Record<string, string>>(breakpoints: TBreakpoints) => (key: keyof TBreakpoints) => boolean;
/**
* `useIsScreen` subscribes to media query checking minimal width of screen.
* Matches default Tailwind's screen sizes and breakpoint methodology.
*
* @example
* const isLg = useIsScreen("lg");
* if (isLg) // do something on large screens
*
* @example
* // those are equivalents
* useIsScreen("xl")
* <div className="xl:flex" />
*
*/
export declare const useIsScreen: (key: "sm" | "md" | "lg" | "xl" | "2xl") => boolean;