The width threshold in pixels (default: 700)
Configuration options
An object containing isBelowBreakpoint state and containerRef to attach
Unlike media queries which detect viewport/screen size, this hook detects the actual width of a container element using ResizeObserver. This is useful for creating container-responsive components that adapt to their available space rather than the viewport size.
Key Features:
Basic usage with a responsive layout:
import { useContainerBreakpoint } from '@hiyve/utilities';
function ResponsiveComponent() {
const { isBelowBreakpoint, containerRef } = useContainerBreakpoint(700);
return (
<div ref={containerRef}>
{isBelowBreakpoint ? (
<MobileLayout />
) : (
<DesktopLayout />
)}
</div>
);
}
Multiple breakpoints:
import { useContainerBreakpoint } from '@hiyve/utilities';
function MultiBreakpointComponent() {
const { isBelowBreakpoint: isSmall, containerRef } = useContainerBreakpoint(400);
const { isBelowBreakpoint: isMedium } = useContainerBreakpoint(700);
// Note: You can only use one containerRef per element
// For multiple breakpoints, use a single ref and check the width manually
return (
<div ref={containerRef}>
{isSmall ? 'Small' : isMedium ? 'Medium' : 'Large'}
</div>
);
}
With initial value for SSR:
import { useContainerBreakpoint } from '@hiyve/utilities';
function SSRSafeComponent() {
const { isBelowBreakpoint, containerRef } = useContainerBreakpoint(700, {
initialValue: true, // Assume mobile-first for SSR
});
return (
<div ref={containerRef}>
{isBelowBreakpoint ? <MobileView /> : <DesktopView />}
</div>
);
}
A hook that detects when a container element is below a specified width breakpoint.