@daltonr/notifywrite-react

React adapter for @daltonr/notifywrite — hooks over the headless notification engine, built on useSyncExternalStore for tear-free reads.

npm install @daltonr/notifywrite @daltonr/notifywrite-react

import { NotificationEngine } from "@daltonr/notifywrite";
import { NotificationProvider, useNotificationsContext } from "@daltonr/notifywrite-react";

const engine = new NotificationEngine({ order: "newest-first" });

function Toasts() {
  const { notifications, dismiss, pause, resume } = useNotificationsContext();
  return notifications.map(n => (
    <div key={n.id} onMouseEnter={() => pause(n.id)} onMouseLeave={() => resume(n.id)}>
      {n.message} <button onClick={() => dismiss(n.id)}>×</button>
    </div>
  ));
}

export const App = () => (
  <NotificationProvider engine={engine}>
    <Toasts />
  </NotificationProvider>
);

useNotifications(engine) is also exported for use without context. See the project README for the full engine API.

MIT © Richard Dalton