useResponsiveClasses

Updated: July 27, 2026

The useResponsiveClasses hook is an internal utility used by Flex and Grid components to manage responsive CSS classes based on breakpoints. It dynamically applies and removes classes as the viewport size changes. Used in components: Flex, Grid

This is an internal hook. You should never need to use this hook directly. Instead, use the Flex and Grid components with responsive props (e.g., `m={{ direction: 'column' }}`), which automatically handle responsive behavior.

Features

Automatic responsive class management
Breakpoint-based class switching
Optimized for performance
Used internally by Flex and Grid

Internal usage

This hook is used internally by the Flex and Grid components and is not typically used directly in application code.

Internal usage

// Internal usage in Flex component
const useResponsiveClasses = ({
elementRef,
baseDirection,
responsiveProps,
breakpoints
}) => {
// Manages responsive class application
// based on window size and breakpoints

useEffect(() => {
  // Add/remove classes on resize
}, [breakpoints]);
};

How it works

The hook:

Monitors window resize events
Compares current width against breakpoints
Applies appropriate CSS classes for the current breakpoint
Removes classes from other breakpoints

Supported properties

The hook manages responsive classes for:

position - static, relative, absolute, fixed, sticky
direction - row, column, row-reverse, column-reverse
horizontal - justify-start, justify-end, justify-center, etc.
vertical - align-start, align-end, align-center, etc.
overflow - visible, hidden, scroll, auto
overflowX - x-axis overflow
overflowY - y-axis overflow
columns - grid column count (1-12)
flex - flex values (1-12)
wrap - wrap, nowrap, wrap-reverse
hide / show - responsive visibility
top, right, bottom, left - position offsets
align - text alignment
scrollbar - scrollbar visibility
pointerEvents - pointer event handling
opacity - opacity levels
zIndex - z-index levels
transition - transition presets

Per-component breakpoint types

The hook works with per-component breakpoint types defined via BreakpointProps<Source, Keys>:

Ts

// Each component defines only the props it supports
type FlexBreakpointProps = BreakpointProps<AllFlexProps,
  'direction' | 'horizontal' | 'vertical' | 'center' | 'wrap' | 'flex' |
  'padding' | 'gap' | 'width' | 'height' | 'background' | 'opacity' | ...
>;

type GridBreakpointProps = BreakpointProps<AllGridProps,
  'columns' | 'rows' |
  'padding' | 'gap' | 'width' | 'height' | 'background' | 'opacity' | ...
>;

Performance

The hook is optimized with:

Debounced resize handling
Efficient class manipulation
Minimal re-renders
Cleanup on unmount

Used by:

Flex
Grid

Example output

When a Flex component has responsive props:

Responsive Flex

<Flex direction="row" m={{ direction: 'column' }}>
{/* Hook applies 'flex-column' on medium screens */}
{/* Hook applies 'flex-row' on large+ screens */}
</Flex>

Note

This is an internal hook. For responsive layouts, use the Flex and Grid components directly with responsive props rather than using this hook. See Responsive Breakpoints for the full API.

HooksuseArrowNavigation

HooksuseHeadingLinks

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club

useResponsiveClasses

Features

Internal usage

How it works

Supported properties

Per-component breakpoint types

Performance

Related components

Example output

Note