develop

useBreakpointsConfig

A custom breakpoints configurator.

This custom hook is built upon useBreakpoints() and returns the provided configuration depending on the current breakpoint match. It responds to window resizing and is built to work in server-side rendering (SSR) applications.

Usage

import { useBreakpointsConfig } from "@wonderflow/react-components";

type Config = {
  direction: "row" | "column";
  hPadding: "8" | "16" | "32";
  vPadding: "8" | "16";
}

export default () {
  const { matches, value } = useBreakpointsConfig<Config>({
      md: { direction: "row", hPadding: "16", vPadding: "8" },
      lg: { direction: "row", hPadding: "32", vPadding: "16" },
      xl: { direction: "row", hPadding: "32", vPadding: "16" },
      fallback: { direction: "column", hPadding: "8", vPadding: "16" },
    });

  return (
    <Stack direction={value.direction} hPadding={value.hPadding} vPadding={value.vPadding}>
      <p>{`Key: ${matches}`}</p>
      <p>{`Value: ${JSON.stringify(value)}`}</p>
    </Stack>)
}

tsx

API Reference

PROPERTY

TYPE

DEFAULT

config*

BreakpointsConfig<T>

target

MutableRefObject<HTMLElement | null>

The window object

settings

BreakpointsSettings

System Breakpoints

Return value

VALUE

TYPE

DESCRIPTION

value

<T>

The value configured for any breakpoint match or the fallback value

breakpoints

BreakepointsValue

A key/value pair object with boolean for every breakpoint

matches

BreakpointsName

xs | sm | md | lg | xl

size

number

The window or target width