Mobile Notice

Want to disable your app for mobile/tablet? Then this react component is for you. This uses user agent instead of screen size, so it will be always accurate.

"use client";

import { useEffect, useState } from "react";

import { Icons } from "@/assets/icons";

export function MobileNotice({ children }: { children: React.ReactNode }) {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    if (typeof navigator !== "undefined") {
      const userAgent = navigator.userAgent;
      setIsMobile(
        /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
          userAgent,
        ),
      );
    }
  }, []);

  return isMobile ? (
    <div className="flex items-center justify-center h-screen flex-col space-y-4 bg-white px-4 text-center text-muted-foreground">
      <Icons.MobileOff className="size-20" />
      <p>
        This application is not optimized for mobile yet. Please use a desktop
        browser.
      </p>
    </div>
  ) : (
    children
  );
}

Usage

Use this in your root component (e.g. layout.tsx) by wrapping like a provider.