useNotify

Simple, design-free toast notifications with a single peer dependency: rxjs.

Installation

npm install --save use-notify-rxjs

Usage

import { useNotify } from 'use-notify-rxjs';

function Demo() {
  const notify = useNotify();

  return (
  <>
    <div>
      <button onClick={() => notify.success({ message: "This is a success notification", title: "Congrats!", ttl: 2000 })}>Add Success</button>
      <button onClick={() => notify.info({ message: "This is an info notification", ttl: 10000 })}>Add Info</button>
      <button onClick={() => notify.error("This is an error notification")}>Add Error</button>
    </div>
    <ul>
      {notify.notifications.map(note =>
        <li key={note.id} className={note.type}>
          <span>{note.message}</span> 
          <span onClick={() => clear(note.id)}>&times;</span>
        </li>
      )}
    </ul>
  </>
  );
}

function App() {
  return <NotifyProvider supressDuplicates>
    <Demo />
  </NotifyProvider>;
}

ReactDOM.render(<App/>, document.getElementById("root"));

Reference

const { notifications, success, info, error, clear } = useNotify();

• notifications: Notify[] - list of notifications
• success: (message: string | NofityMessage) => void - send success alert
• info: (message: string | NofityMessage) => void - send info alert
• error: (message: string | NofityMessage) => void - send error alert
• clear: (id?: number) => void - clear single or all alerts

type Notify = {
  id: number;
  message: string;
  title?: string;
  type: NotifyType;
  isSuccess: boolean;
  isInfo: boolean;
  isError: boolean;
  ttl: number;
}

type NotifyMessage = {
  message: string;
  title?: string;
  ttl?: number; // override global ttl for individual message
}

enum NotifyType {
  Error = "error",
  Info = "info",
  Success = "success",
}

<NotifyProvider ttl={4500} supressDuplicates={true}>
  <Demo />
</NotifyProvider>

• ttl: number (optional, default: 4500) - number of ms the notification should be kept alive