Docs
useBreakpoint

Detect and respond to changes in viewport size with the useBreakpoint hook, allowing for responsive design adjustments.

Loading...

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-breakpoint

Usage

"use client"
 
import * as React from "react"
 
import { useBreakpoint } from "@/hooks/use-breakpoint"
 
export function Component() {
  const { currentBreakpoint, isAbove } = useBreakpoint()
 
  return (
    <div>
      <h2>Current Breakpoint: {currentBreakpoint}</h2>
      <div
        style={{
          padding: isAbove("xl") ? "40px" : "20px",
          fontSize: isAbove("2xl") ? "24px" : "16px",
          backgroundColor: isAbove("lg") ? "#e3f2fd" : "#fff8e1",
        }}
      >
        {isAbove("2xl")
          ? "Extra Large Desktop View"
          : isAbove("xl")
            ? "Desktop View"
            : isAbove("lg")
              ? "Laptop View"
              : isAbove("md")
                ? "Tablet View"
                : "Mobile View"}
      </div>
    </div>
  )
}

API Reference

Parameters

NameTypeDescriptionDefault ValueOptional
breakpointsPartial<Record<Breakpoint, number>>Custom breakpoints to override the default values.{}Yes

Return Values

NameTypeDescription
currentBreakpointBreakpoint | nullThe current breakpoint based on the viewport width. Returns null if no breakpoints match.
isAbove(breakpoint: Breakpoint) => booleanFunction to check if the current viewport width is above the specified breakpoint.
isBelow(breakpoint: Breakpoint) => booleanFunction to check if the current viewport width is below the specified breakpoint.
useBooleanuseCallbackRef