LayoutProvider

The LayoutProvider component is a context provider that creates a listener for the Flex and Grid components to track window size.

Simple setup

Wrap your app with LayoutProvider.

layout.tsx

<LayoutProvider>
  {children}
</LayoutProvider>

Advanced setup

You can pass a breakpoint object to the LayoutProvider.

Providers.tsx

import { IconProvider, ToastProvider, ThemeProvider, DataThemeProvider, LayoutProvider } from "@once-ui-system/core";

export function Providers({ children }: {
  children: React.ReactNode
}) {
  return (
    <LayoutProvider
      breakpoints={{
        s: 640,
        m: 1024,
        l: 1200,
      }}
    >
      <ThemeProvider>
        <DataThemeProvider>
          <ToastProvider>
            <IconProvider>
              {children}
            </IconProvider>
          </ToastProvider>
        </DataThemeProvider>
      </ThemeProvider>
    </LayoutProvider>
  );
}

API reference

Prop	Type	Default
children	React.ReactNode	—
breakpoints	{ xs?: number; s?: number; m?: number; l?: number; xl?: number }	—

useLayout

useLayout() reads the resolved breakpoint state. Use it when a decision cannot be expressed with the responsive props — mounting a different component per breakpoint, say, rather than styling one. It throws outside a LayoutProvider.

useLayout

const { currentBreakpoint, maxWidth } = useLayout();

// Below the m breakpoint, render the sheet instead of the popover.
return maxWidth("s") ? <Sheet {...props} /> : <Popover {...props} />;

width is 0 on the server and on the first client render, so branch on it only inside an effect — or branch on currentBreakpoint, which is resolved before paint.

Returns	Type	Default
currentBreakpoint The breakpoint the viewport currently sits in.	xssmlxl	—
width Viewport width in pixels. 0 until measured.	number	0
breakpoints The active breakpoint map.	Record<BreakpointKey, number>	DEFAULT_BREAKPOINTS
isBreakpoint True when the viewport is exactly at that breakpoint.	(key: BreakpointKey) => boolean	—
maxWidth True at or below that breakpoint.	(key: BreakpointKey) => boolean	—
minWidth True at or above that breakpoint.	(key: BreakpointKey) => boolean	—
isDefaultBreakpoints True when no custom breakpoints were supplied.	() => boolean	—

DEFAULT_BREAKPOINTS

Exported so a custom map can be derived from it rather than retyped.

DEFAULT_BREAKPOINTS

{ xs: 480, s: 768, m: 1024, l: 1440, xl: Infinity }