Simplify Browser Interactions in React with useDownload and useNotifications

Managing native browser features inside React applications often leads to repetitive imperative code, cleanup bugs, and fragmented state management. Whether you are generating downloadable files on the fly or triggering native desktop alerts, writing safe wrappers around browser APIs takes time away from building core application features.

To make these common web interactions effortless, react-hook-lab has introduced two brand-new production-ready hooks: useDownload and useNotifications!

1. Effortless File Exports with useDownload

Triggering a browser download dynamically usually requires creating temporary anchor tags, handling Blob URLs, and manually revoking object URLs to prevent memory leaks. The new useDownload hook encapsulates all of this behavior while providing clear reactive state tracking (status and error).

It seamlessly handles plain text, JSON objects, Blobs, and remote or relative URLs.

Code Example: Dynamic JSON & URL Export

import React from "react";
import { useDownload } from "react-hook-lab";

export function DataExporter() {
  const { download, status, error } = useDownload();

  const exportReport = async () => {
    const reportData = {
      title: "\"Monthly Analytics\","
      generatedAt: new Date().toISOString(),
      metrics: { users: 1420, activeSessions: 380 }
    };

    await download(reportData, "analytics-report.json");
  };

  return (
    <div className="export-container">
      <h3>Export Dashboard Data</h3>
      <button onClick={exportReport} disabled={status === "downloading"}>
        {status === "downloading" ? "Preparing File..." : "Download JSON Report"}
      </button>
      {status === "success" && <p>Download started successfully!</p>}
      {error && <p className="error">Error: {error}</p>}
    </div>
  );
}

Enter fullscreen mode Exit fullscreen mode

2. Native OS Alerts with useNotifications

The Web Notifications API allows applications to display native system alerts even when the browser tab is blurred or running in the background. However, handling permission requests, tracking active notification references, and re-checking permissions on window focus can be tedious.

The useNotifications hook automates permission syncing on window focus, provides programmatic controls to send or dismiss notifications, and manages active references cleanly.

Code Example: Requesting Permission & Triggering Alerts

import React from "react";
import { useNotifications } from "react-hook-lab";

export function NotificationManager() {
  const { permission, sendNotification, requestPermission, error } = useNotifications({
    autoRequest: false,
  });

  const handleSendAlert = () => {
    if (permission !== "granted") {
      requestPermission();
      return;
    }

    sendNotification("Task Completed!", {
      body: "Your background export process has finished successfully.",
      icon: "/icons/success.png",
    });
  };

  return (
    <div className="notification-box">
      <h3>Browser Notifications</h3>
      <p>Current Permission Status: <strong>{permission}</strong></p>
      <button onClick={handleSendAlert}>
        {permission === "granted" ? "Send Test Alert" : "Enable Notifications"}
      </button>
      {error && <p className="error">{error}</p>}
    </div>
  );
}

Enter fullscreen mode Exit fullscreen mode

Summary

Both hooks bring declarative simplicity and robust lifecycle management to browser operations. Give them a try in your next React project!

Resources & Links

• 📦 NPM Package: react-hook-lab on NPM
• 🐙 GitHub Repository: Saurav-TB-Pandey/react-hook-lab
• 👤 LinkedIn Profile: Connect on LinkedIn