@intility/bifrost-react/dist/hooks/useBreakpoint.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import useMediaQuery from "./useMediaQuery.js";
const map = {
  small: 600,
  medium: 960,
  large: 1280,
  xl: 1600,
  xxl: 1920
};

/**
 * Usage: useBreakpoint(from, to) where from and to are optional viewport width
 * keywords:
 *
 * - small = 600px
 * - medium = 960px
 * - large = 1280px
 * - xl = 1600px
 * - xxl = 1920px
 *
 * @returns `true` if screen width is within range (otherwise `false`)
 *
 * @see https://bifrost.intility.com/react/useBreakpoint
 *
 * @example
 * const toSmall = useBreakpoint(null, "small");
 * const fromSmallToMedium = useBreakpoint("small", "medium");
 * const fromMedium = useBreakpoint("medium");
 */
export default function useBreakpoint(from, to) {
  const $ = _c(3);
  let matchArray;
  if ($[0] !== from || $[1] !== to) {
    matchArray = [];
    if (from) {
      matchArray.push(`(min-width: ${map[from]}px)`);
    }
    if (to) {
      matchArray.push(`(max-width: ${map[to] - 1}.9px)`);
    }
    $[0] = from;
    $[1] = to;
    $[2] = matchArray;
  } else {
    matchArray = $[2];
  }
  const matchString = matchArray.join(" and ");
  return useMediaQuery(matchString) ?? false;
}