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",
|
|
}
|