Category: Uncategorized

Non-categorized post and articles about Information Technologies.

How to render JSX content on Desktop Only

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 🙂