Create a simple tooling DesktopOnly component like this:
'use client';
import { FunctionComponent, PropsWithChildren } from 'react';
import { useIsMobile } from '@/hooks'; // Custom hook using Media Query or Resize Observer
/**
* Tooling component to render children only on desktop devices
* @component DesktopOnly
*/
const DesktopOnly: FunctionComponent = ({ children }) => {
const isMobile = useIsMobile();
if (isMobile) {
return null; // Do not render children on mobile devices
}
return children; // Render children on desktop devices
};
export default DesktopOnly;
Also you can create an opposite one – the MobileOnly component.
Happy hacking 🙂
