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.

tsxCopy code
1"use client";
2
3import { useEffect, useState } from "react";
4
5import { Icons } from "@/assets/icons";
6
7export function MobileNotice({ children }: { children: React.ReactNode }) {
8  const [isMobile, setIsMobile] = useState(false);
9
10  useEffect(() => {
11    if (typeof navigator !== "undefined") {
12      const userAgent = navigator.userAgent;
13      setIsMobile(
14        /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
15          userAgent,
16        ),
17      );
18    }
19  }, []);
20
21  return isMobile ? (
22    <div className="flex items-center justify-center h-screen flex-col space-y-4 bg-white px-4 text-center text-muted-foreground">
23      <Icons.MobileOff className="size-20" />
24      <p>
25        This application is not optimized for mobile yet. Please use a desktop
26        browser.
27      </p>
28    </Center>
29  ) : (
30    children
31  );
32}

Usage

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

Loved this post?

🍕 Buy me a pizzaDonate via

Comments