useNotification

npm install rooks

import { useState } from "react";
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>
  );
}

import { useNotification } from "rooks";

function PresetNotification() {
  const { permission, requestPermission, show, isSupported } =
    useNotification();

  if (!isSupported) {
    return <p>Your browser does not support notifications.</p>;
  }

  return (
    <div>
      <p>Permission: {permission}</p>
      <button onClick={requestPermission}>Enable notifications</button>
      <button
        onClick={() =>
          show("Build finished", {
            body: "Your latest batch of examples is ready for review.",
            tag: "batch-ready",
          })
        }
      >
        Send preset notification
      </button>
    </div>
  );
}