Files
donetick/src/hooks/useResponsiveModal.js
2026-08-16 11:52:40 -04:00

25 lines
760 B
JavaScript

import useMediaQuery from '@mui/material/useMediaQuery'
import { createElement } from 'react'
import AppModal from '../components/common/AppModal'
const MobileAppModal = props =>
createElement(AppModal, { ...props, isMobile: true })
const DesktopAppModal = props =>
createElement(AppModal, { ...props, isMobile: false })
/**
* Backwards-compatible access to the app modal system.
*
* New code may render AppModal directly when it already knows the desired
* presentation. Existing callers can continue using ResponsiveModal.
*/
export const useResponsiveModal = (breakpoint = 768) => {
const isMobile = useMediaQuery(`(max-width:${breakpoint}px)`)
return {
ResponsiveModal: isMobile ? MobileAppModal : DesktopAppModal,
isMobile,
}
}