hook breakpoint

📐 useBreakpoint Hook

Overview

useBreakpoint is a custom React hook designed to track the current Carbon Design System breakpoint based on the browser window's width. It provides a simple and reactive way to adapt UI behavior and layout depending on screen size, enabling responsive design patterns throughout the application.

This hook listens for resize events and updates the breakpoint dynamically, returning one of the following values:

• 'max' — ≥ 1584px
• 'xlg' — ≥ 1312px
• 'lg' — ≥ 1056px
• 'md' — ≥ 672px
• 'sm' — < 672px

🧪 Usage Example

import useBreakpoint from '@/hooks/useBreakpoint';

const ResponsiveComponent = () => {
  const breakpoint = useBreakpoint();

  return (
    <div>
      <p>Current breakpoint: {breakpoint}</p>
      {breakpoint === 'sm' && <MobileMenu />}
    </div>
  );
};

🔍 Implementation Details

• Initial State: The hook initializes with the current window width.
• Event Listener: It attaches a resize listener to update the breakpoint on window size changes.
• Cleanup: The listener is removed on component unmount to prevent memory leaks.

📦 Return Type

type BreakpointType = 'max' | 'xlg' | 'lg' | 'md' | 'sm';

💡 Why It Matters

Carbon’s responsive grid system is breakpoint-driven, and this hook allows components to react to those breakpoints without relying on CSS media queries alone. It’s especially useful for conditional rendering, layout adjustments, and mobile-first design strategies.