useNotification

npm install rooks

import { useNotification } from "rooks";

function NotificationDemo() {
  const { show, permission, requestPermission, isSupported } = useNotification();
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");

  const handleRequestPermission = async () => {
    const result = await requestPermission();
    if (result === "granted") {
      console.log("Permission granted!");
    } else {
      console.log("Permission denied");
    }
  };

  const handleShowNotification = async () => {
    if (permission === "granted") {
      await show(title, {
        body: body,
        icon: "/logo192.png",
        tag: "demo-notification",
        requireInteraction: false,
      });
    }
  };

  if (!isSupported) {
    return <div>Notifications not supported in this browser</div>;
  }

  return (
    <div>
      <h2>Browser Notifications</h2>
      <p>Current permission: <strong>{permission}</strong></p>

      {permission === "default" && (
        <div>
          <p>You need to grant permission to show notifications</p>
          <button onClick={handleRequestPermission}>Request Permission</button>
        </div>
      )}

      {permission === "granted" && (
        <div>
          <input
            placeholder="Notification title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
          <input
            placeholder="Notification body"
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
          <button onClick={handleShowNotification}>Show Notification</button>
        </div>
      )}

      {permission === "denied" && (
        <p>Permission denied. Please enable notifications in browser settings.</p>
      )}
    </div>
  );
}