Home >Web Front-end >JS Tutorial >Handling Local Storage for Toaster Notifications

Handling Local Storage for Toaster Notifications

Patricia ArquetteOriginal: 2025-01-03 04:03:39354browse

Demo :

Source code :

============= layout.tsx 
<body>
   <ThemeProvider attribute="class" defaultTheme="dark">
     {children}
      <DevToaster />
   </ThemeProvider>
</body>

============= dev-toaster.tsx 
export function TemplateToaster() {
  const [isVisibile, setIsVisible] = useState(true);
  const [notificationStatus, setNotificationStatus] = useState<string | null>(null);
  const path = usePathname();
  const [hydrated, setHydrated] = useState(false);

  // Run this effect only once to set hydrated to true
  useEffect(() => {
    setHydrated(true);
  }, []);

  // Run this effect only on client side
  useEffect(() => {
    if (hydrated) {
      // Remove the saved notification status to reset it
      localStorage.removeItem("behindui-notification");
      // Check localStorage after clearing
      setNotificationStatus(localStorage.getItem("behindui-notification"));
    }
  }, [hydrated]);

  if (!hydrated) {
    return null;
  }

  const templates = path.includes("templates");
  const isIframe = isInIframe();
  if (isIframe || notificationStatus === "off") {
    return <div></div>;
  }

  return (
    isVisibile &&
    !templates && (
      <section className="relative z-50">
        <div className="font-geist fixed bottom-4 right-4">
          <Card className={cn(" w-[350px] bg-background [border:1px_solid_rgba(255,255,255,.1)]")}>
            <CardHeader>
              <div className="font-mono font-bold  uppercase tracking-tight">
                ?Website Under Development ? <br />
              </div>
              <CardDescription className="mt-4 text-black/90 dark:text-white/70">This website is currently in active development. Some features may be incomplete or not working as expected</CardDescription>
            </CardHeader>
            <CardFooter className="flex justify-end gap-4">
              <Button
                size="sm"
                onClick={() => {
                  localStorage.setItem("behindui-notification", "off");
                  setIsVisible(false);
                }}
              >
                Understand
              </Button>
            </CardFooter>
          </Card>
        </div>
      </section>
    )
  );
}

function isInIframe() {
  try {
    return window.self !== window.top;
  } catch (e) {
    return true;
  }
}

The above is the detailed content of Handling Local Storage for Toaster Notifications. For more information, please follow other related articles on the PHP Chinese website!

html if for var https iframe

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Building an Attendance System with Face Recognition Using Nextjs and FACEIONext article：Building an Attendance System with Face Recognition Using Nextjs and FACEIO

See more

Handling Local Storage for Toaster Notifications

Related articles