aura-glass/dist/esm/components/navigation/hooks/useResponsive.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

import { useState, useEffect } from 'react';

const useResponsive = (breakpoints = {
  mobile: 768,
  tablet: 1024
}) => {
  const [state, setState] = useState({
    isMobile: false,
    isTablet: false,
    isDesktop: true,
    width: typeof window !== 'undefined' ? window.innerWidth : 1024,
    height: typeof window !== 'undefined' ? window.innerHeight : 768
  });
  useEffect(() => {
    const updateState = () => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      setState({
        isMobile: width < breakpoints.mobile,
        isTablet: width >= breakpoints.mobile && width < breakpoints.tablet,
        isDesktop: width >= breakpoints.tablet,
        width,
        height
      });
    };
    updateState();
    window.addEventListener('resize', updateState);
    return () => window.removeEventListener('resize', updateState);
  }, [breakpoints.mobile, breakpoints.tablet]);
  return state;
};

export { useResponsive as default };
//# sourceMappingURL=useResponsive.js.map