useMedia

useIsScreen

const useIsScreen: (key) => boolean;

Defined in: packages/design-system/src/utils/useMedia/useMedia.ts:84

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" />

---

usePrefersDarkMode()

function usePrefersDarkMode(): boolean;

Defined in: packages/design-system/src/utils/useMedia/useMedia.ts:43

Tracks whether the browser or operating system prefers a dark color scheme.

Returns

boolean

---

useIsTouchDevice()

function useIsTouchDevice(): boolean;

Defined in: packages/design-system/src/utils/useMedia/useMedia.ts:49

Checks if the user uses a touch device

Returns

boolean

---

createUseIsScreen()

function createUseIsScreen<TBreakpoints>(breakpoints): (key) => boolean;

Defined in: packages/design-system/src/utils/useMedia/useMedia.ts:62

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

Example

const useIsScreen = createUseIsScreen({ sm: '560px', lg: "1200px" });
useIsScreen("sm");