useMedia
useIsScreen()
const useIsScreen: (key) => boolean;
Defined in: src/utils/useMedia/useMedia.ts:79
Subscribes to media query checking minimal width of screen. Matches default Tailwind's screen sizes and breakpoint methodology.
Parameters
| Parameter | Type |
|---|---|
key | "sm" | "lg" | "md" | "xl" | "2xl" |
Returns
boolean
Examples
const isLg = useIsScreen("lg");
if (isLg) // do something on large screens
// those are equivalents
useIsScreen("xl")
<div className="xl:flex" />
useIsTouchDevice()
function useIsTouchDevice(): boolean;
Defined in: src/utils/useMedia/useMedia.ts:44
Checks if the user uses a touch device
Returns
boolean
createUseIsScreen()
function createUseIsScreen<TBreakpoints>(breakpoints): (key) => boolean;
Defined in: src/utils/useMedia/useMedia.ts:57
Allows creating a useIsScreen hook with provided breakpoints. Use useIsScreen directly if you just need default Tailwind's screens.
Type Parameters
| Type Parameter |
|---|
TBreakpoints extends Record<string, string> |
Parameters
| Parameter | Type |
|---|---|
breakpoints | TBreakpoints |
Returns
(key): boolean;
Parameters
| Parameter | Type |
|---|---|
key | keyof TBreakpoints |
Returns
boolean
Example
const useIsScreen = createUseIsScreen({ sm: '560px', lg: "1200px" });
useIsScreen("sm");