@drivy/cobalt/hooks/useBreakpoint.js

Opinionated design system for Drivy's projects.

import { useState } from "react";
import { breakpoints } from "../tokens/index.js";
import { useOnMountEffect } from "./useOnMountEffect.js";
const defaultBreakpoint = "md";
const breakpointsArray = Object.keys(breakpoints).map((bp)=>({
        name: bp,
        value: parseInt(breakpoints[bp].slice(0, -2), 10)
    })).sort((a, b)=>a.value - b.value);
const cobaltBreakpoints = breakpointsArray.map((breakpoint, index)=>{
    if (0 === index) return [
        breakpoint.name,
        `(max-width: ${breakpoint.value - 1}px)`
    ];
    return [
        breakpoint.name,
        `(min-width: ${breakpointsArray[index - 1].value}px) and (max-width: ${breakpoint.value - 1}px)`
    ];
});
cobaltBreakpoints.push([
    "over",
    `(min-width: ${breakpointsArray[breakpointsArray.length - 1].value}px)`
]);
const isMobileBreakpoint = (bp)=>"sm" === bp || "xs" === bp;
const isTabletBreakpoint = (bp)=>"md" === bp;
const isDesktopBreakpoint = (bp)=>"lg" === bp || "over" === bp;
const getMediaQueriesList = ()=>cobaltBreakpoints.map((b)=>window.matchMedia(b[1]));
const getBreakpoint = ()=>{
    const matchIndex = getMediaQueriesList().findIndex((media)=>media.matches);
    return -1 !== matchIndex ? cobaltBreakpoints[matchIndex][0] : defaultBreakpoint;
};
const useBreakpoint = ()=>{
    const initialBreakpoint = getBreakpoint();
    const [breakpoint, setBreakpoint] = useState(initialBreakpoint);
    const [isMobile, setIsMobile] = useState(isMobileBreakpoint(initialBreakpoint));
    const [isTablet, setIsTablet] = useState(isTabletBreakpoint(initialBreakpoint));
    const [isDesktop, setIsDesktop] = useState(isDesktopBreakpoint(initialBreakpoint));
    useOnMountEffect(()=>{
        const handleMediaChange = ()=>{
            const newBreakpoint = getBreakpoint();
            setBreakpoint(newBreakpoint);
            setIsMobile(isMobileBreakpoint(newBreakpoint));
            setIsTablet(isTabletBreakpoint(newBreakpoint));
            setIsDesktop(isDesktopBreakpoint(newBreakpoint));
        };
        const mediaQueriesList = getMediaQueriesList();
        mediaQueriesList.forEach((mq)=>{
            mq.addEventListener ? mq.addEventListener("change", handleMediaChange) : mq.addListener(handleMediaChange);
        });
        return ()=>mediaQueriesList.forEach((mq)=>{
                mq.removeEventListener ? mq.removeEventListener("change", handleMediaChange) : mq.removeListener(handleMediaChange);
            });
    });
    return {
        breakpoint,
        isMobile,
        isTablet,
        isDesktop
    };
};
const hooks_useBreakpoint = useBreakpoint;
export default hooks_useBreakpoint;
export { cobaltBreakpoints };

//# sourceMappingURL=useBreakpoint.js.map