Notification Component

Modal-based notification system with Ant Design-inspired API. Perfect for important messages requiring user attention.

Live Preview

Usage

1. Setup Provider

Wrap your application with NotificationProvider and add NotificationContainer:

import { NotificationProvider, NotificationContainer } 
  from '@featherstudio/react-daisyui-kit';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <NotificationProvider>
          {children}
          <NotificationContainer />
        </NotificationProvider>
      </body>
    </html>
  );
}

2. Basic Usage

import { Notification } from '@featherstudio/react-daisyui-kit';

// Success notification
Notification.success({
  message: 'Operation completed successfully!'
});

// Error notification
Notification.error({
  title: 'Operation Failed',
  message: 'Please check your network connection and try again.'
});

// Warning notification
Notification.warning({
  message: 'You have unsaved changes.'
});

// Info notification
Notification.info({
  message: 'The system will undergo maintenance in 5 minutes.'
});

3. With Action Buttons

Notification.warning({
  title: 'Confirm Deletion',
  message: 'This action cannot be undone. Are you sure you want to delete?',
  actions: [
    {
      label: 'Confirm',
      onClick: () => {
        // Delete logic here
        Notification.success({ message: 'Deleted successfully.' });
      },
      className: 'btn-error'
    },
    {
      label: 'Cancel',
      onClick: () => {
        Notification.info({ message: 'Action canceled.' });
      }
    }
  ],
  duration: 0 // Won't auto-close
});

Features

Ant Design API

Familiar API design similar to Ant Design notification.

Modal-Based Display

Uses DaisyUI Modal for centered, prominent display.

Action Buttons

Support custom action buttons for user interaction.

Auto-Close Support

Optional auto-close with configurable duration.

Props

Property	Type	Default	Description
message	string \| ReactNode	-	Notification content (required)
title	string	-	Notification title
duration	number	0	Duration in ms. 0 = no auto-close
actions	NotificationAction[]	-	Action buttons array
closable	boolean	true	Show close button
onClose	() => void	-	Close callback function

Action Button Config

Property	Type	Description
label	string	Button text label
onClick	() => void	Click event handler
className	string	Button CSS classes

← Back to Components