notification.tsx

import { Notifications, push } from "./notifications.jsx";

function Example() {
  return (
    <>
      <button
        onClick={() => {
          push("Hello");
          push("Hello", { role: "status" });
          push("Hello", { onUndo: () => {}, timeout: 10000 });
          push("Hello", { visuallyHidden: true });
        }}
      >
        Push notification
      </button>
    </>
  );
}

export default function App() {
  return (
    <>
      <Example />
      <Notifications />
    </>
  );
}

notifications.tsx

import type {
  NotificationStoreItem
} from "@ariakit/react/notification";
import {
  createNotificationStore,
  Notification,
  NotificationContainer,
  NotificationDismiss,
} from "@ariakit/react/notification";

interface Item extends NotificationStoreItem {
  onUndo?: () => void;
}

const notification = createNotificationStore<Item>();

export const push = notification.push;

export function Notifications() {
  const items = notification.useState("items");
  return (
    <NotificationContainer className="notification-container">
      {items.map(({ onUndo, ...props }) => (
        <Notification {...props} key={props.id} className="notification">
          {props.children}
          <NotificationDismiss />
          {onUndo && <button onClick={onUndo}>Undo</button>}
        </Notification>
      ))}
    </NotificationContainer>
  );
}