47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
export function useIsMobile(breakpoint = 860): boolean {
|
|
const [isMobile, setIsMobile] = useState<boolean>(() => {
|
|
if (typeof window === 'undefined') return false;
|
|
return (
|
|
window.innerWidth <= breakpoint ||
|
|
(typeof window.matchMedia === 'function' && window.matchMedia(`(max-width: ${breakpoint}px)`).matches) ||
|
|
(typeof navigator !== 'undefined' && /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent))
|
|
);
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return;
|
|
const mq = typeof window.matchMedia === 'function' ? window.matchMedia(`(max-width: ${breakpoint}px)`) : null;
|
|
const check = () => {
|
|
setIsMobile(
|
|
window.innerWidth <= breakpoint ||
|
|
(mq ? mq.matches : false) ||
|
|
(typeof navigator !== 'undefined' && /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent))
|
|
);
|
|
};
|
|
|
|
check();
|
|
window.addEventListener('resize', check);
|
|
if (mq) {
|
|
if (typeof mq.addEventListener === 'function') {
|
|
mq.addEventListener('change', check);
|
|
} else if (typeof mq.addListener === 'function') {
|
|
mq.addListener(check);
|
|
}
|
|
}
|
|
return () => {
|
|
window.removeEventListener('resize', check);
|
|
if (mq) {
|
|
if (typeof mq.removeEventListener === 'function') {
|
|
mq.removeEventListener('change', check);
|
|
} else if (typeof mq.removeListener === 'function') {
|
|
mq.removeListener(check);
|
|
}
|
|
}
|
|
};
|
|
}, [breakpoint]);
|
|
|
|
return isMobile;
|
|
}
|