Notifications

How to use Notifications?

The notification system provides lightweight, macOS-style popup messages that appear in the top-right corner of the screen. Notifications slide in, auto-dismiss, can be swiped away, and support optional icons.

---

1. Setup

Wrap your application with NotificationProvider to enable notifications globally.

import { NotificationProvider } from './NotificationProvider';

root.render(
  <NotificationProvider>
    <App />
  </NotificationProvider>
);

2. Using Notifications

You can trigger a notification from any component inside the provider using useNotification().

import { useNotification } from './NotificationProvider';

const Example = () => {
  const { notify } = useNotification();

  return (
    <button onClick={() => notify('Saved successfully')}>
      Save
    </button>
  );
};

You can use optional parameters: notify(message, duration?, icon?)

notify(
  message: string,
  duration?: number,      // default: 3000ms
  icon?: string | { default: string }
)

notify('New message received', 5000, bell);

3. Behavior & Interaction

Slide Animation

• Uses Framer Motion.
• Notifications enter from the right.
• Exit by sliding back out.

Auto-Dismiss

• Default timeout: 3000ms.
• On dismiss, the notification animates out and is removed after 500ms.

Swipe-to-Dismiss

• Each notification is draggable horizontally.
• Dragging to the right triggers dismissal.

4. Duplicate Prevention

If you trigger the same notification again within 1 second:

• It will not be shown twice.
• This prevents message spam during rapid repeated actions.