import React, {useEffect, useState} from "react";
const useCheckMobileScreen = () => {
const [width, setWidth] = useState(window.innerWidth);
const handleWindowSizeChange = () => {
setWidth(window.innerWidth);
}
useEffect(() => {
window.addEventListener('resize', handleWindowSizeChange);
return () => {
window.removeEventListener('resize', handleWindowSizeChange);
}
}, []);
return (width <= 768);
}
export default useCheckMobileScreen
import {BrowserView, MobileView} from 'react-device-detect';
const MyComponent = () => {
return (
<>
<BrowserView>
<h1>This is rendered only in browser</h1>
</BrowserView>
<MobileView>
<h1>This is rendered only on mobile</h1>
</MobileView>
</>
);
};