Recipes
Common patterns for hooking wizicon into real apps.
Upload progress
"use client";
import { wizicon } from "wizicon";
export function UploadButton() {
return (
<button
onClick={async () => {
try {
await wizicon.promise(
fetch("/api/upload", { method: "POST", body: file }),
);
} catch {
// wizicon already flashed the error state
}
}}
>
Upload
</button>
);
}Unread count
Wire the badge to whatever store holds your unread count.
"use client";
import { useEffect } from "react";
import { wizicon } from "wizicon";
import { useUnreadCount } from "./store";
export function UnreadBadge() {
const count = useUnreadCount();
useEffect(() => {
if (count > 0) wizicon.notify(count);
else wizicon.dismiss();
}, [count]);
return null;
}Brief celebration
wizicon.set({ emoji: "🎉" });
setTimeout(() => wizicon.dismiss(), 3000);Custom logo at startup
If you don't want to rely on auto-detection, configure once at the top of your app shell.
"use client";
import { useEffect } from "react";
import { wizicon } from "wizicon";
export function WiziconBoot() {
useEffect(() => {
wizicon.configure({ logo: "/brand-mark.svg", theme: "auto" });
}, []);
return null;
}