68cd061c6d
Feature/select rate vertical data flow * add fix from SW-2666 * use translations for room packages * move types to it's own file * Merge branch 'master' of bitbucket.org:scandic-swap/web into feature/select-rate-vertical-data-flow * merge * feature/select-rate: double rate for campaing rates * revert NODE_ENV check in Cookiebot script * revert testing values * fix(SW-3171): fix all filter selected in price details * fix(SW-3166): multiroom anchoring when changing filter * fix(SW-3172): check hotelType, show correct breakfast message * Merge branch 'feature/select-rate-vertical-data-flow' of bitbucket.org:scandic-swap/web into feature/select-rate-vertical-data-flow * fix: show special needs icons for subsequent roomTypes SW-3167 * fix: Display strike through text when logged in SW-3168 * fix: Reinstate the scrollToView behaviour when selecting a rate SW-3169 * merge * . * PR fixes * fix: don't return notFound() * . * always include defaults for room packages * merge * merge * merge * Remove floating h1 for new select-rate Approved-by: Anton Gunnarsson
28 lines
953 B
TypeScript
28 lines
953 B
TypeScript
import { useMediaQuery } from "usehooks-ts"
|
|
|
|
type Size = "mobile" | "tablet" | "desktop"
|
|
|
|
/**
|
|
* @example
|
|
* mobile: "max-width: 767px",
|
|
* tablet: "min-width: 768px and max-width: 1023px",
|
|
* desktop: "min-width: 1024px",
|
|
* @param device - The device size to check against.
|
|
* @returns True if the current viewport matches the specified device size, false otherwise.
|
|
*/
|
|
export const useBreakpoint = (devices: Size | Size[]) => {
|
|
const deviceArray = Array.isArray(devices) ? devices : [devices]
|
|
const queries = deviceArray.map((device) => `(${sizeMapping[device]})`)
|
|
return useMediaQuery(queries.join(", "))
|
|
}
|
|
|
|
export const useIsMobile = () => useBreakpoint("mobile")
|
|
export const useIsTablet = () => useBreakpoint("tablet")
|
|
export const useIsDesktop = () => useBreakpoint("desktop")
|
|
|
|
const sizeMapping: Record<Size, string> = {
|
|
mobile: "max-width: 767px",
|
|
tablet: "min-width: 768px and max-width: 1023px",
|
|
desktop: "min-width: 1024px",
|
|
}
|