A hook to detect responsive breakpoints and manage responsive layouts.
The useBreakpoint hook returns the active breakpoint and two functions, up and down, to check if the viewport is above, or below a given breakpoint, letting you adjust your UI responsively.
Current Breakpoint: initial
The viewport is smaller than 768px.
The default breakpoints are:
| Prop | Type | Default | Description |
|---|---|---|---|
| breakpoint | "initial""xs""sm""md""lg""xl" | - | The current active breakpoint based on screen width |
| up | (breakpoint: "initial" | "xs" | "sm" | "md" | "lg" | "xl") => boolean | - | Function that takes a breakpoint and returns true if the screen width is at or above that breakpoint |
| down | (breakpoint: "initial" | "xs" | "sm" | "md" | "lg" | "xl") => boolean | - | Function that takes a breakpoint and returns true if the screen width is at or below that breakpoint |