Function: useBreakpoint()

@arolariu/components

---

@arolariu/components / useBreakpoint

Function: useBreakpoint()

useBreakpoint(): "sm" | "lg" | "md" | "2xl" | "xl"

Defined in: hooks/useBreakpoint.tsx:27

Returns the name of the current CSS breakpoint based on viewport width. Evaluates breakpoints from largest to smallest and returns the first match.

Returns

"sm" | "lg" | "md" | "2xl" | "xl"

The active breakpoint name: "sm", "md", "lg", "xl", or "2xl". Returns "sm" when no breakpoint matches (viewport narrower than 640px).

Example

const bp = useBreakpoint(); // "lg" on a 1200px viewport