useBreakpoints

"use client";

import { Text, useBreakpoints } from "@vortexlabs/vortex";

export const BreakpointValue = () => {
  const columns = useBreakpoints({ xs: 1, sm: 2, lg: 3 });

  return <Text>Columns for this viewport: {columns}</Text>;
};

Include xs as the base value. Use this hook when JavaScript needs the resolved value; prefer responsive component props for styling.

Breakpoint Inheritance

For { xs: 1, sm: 2, lg: 3 }, missing breakpoints inherit the nearest smaller value:

Without xs, an object passes through unchanged instead of resolving a breakpoint.

Typed Values

Supply a generic type when the result must match another API’s allowed values.

"use client";

import { Button, Stack, Text, useBreakpoints } from "@vortexlabs/vortex";

export const ResponsiveButton = () => {
  const size = useBreakpoints<"sm" | "md">({ xs: "sm", md: "md" });

  return (
    <Stack gap={3} align="start">
      <Button size={size}>Create project</Button>
      <Text size="body-sm-desktop" color="subtle">
        Resolved size: {size}
      </Text>
    </Stack>
  );
};

A scalar passes through unchanged:

const limit = useBreakpoints(10); // 10 at every breakpoint

Initial Breakpoint

Use VortexProvider to set the initial breakpoint (xs by default). The hook resolves the viewport after hydration.

"use client";

import type { ReactNode } from "react";
import { VortexProvider } from "@vortexlabs/vortex";

type Props = { children: ReactNode };

export const AppProvider = (props: Props) => {
  const { children } = props;

  return <VortexProvider defaultBreakpoint="md">{children}</VortexProvider>;
};

Breakpoint widths come from the theme’s runtime variables, with library defaults as a fallback.