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