ui-toast-notification

UI Toast Notification

A customizable toast notification system for React applications.

Features

• Four notification types: success, error, info, warning
• Customizable position (top-right, top-left, bottom-right, bottom-left)
• Auto-dismiss after configurable duration
• Easy integration with React hooks
• Styled with CSS and includes icons

Installation

npm install ui-toast-notification

Usage

• Import the hook:

import useNotification from 'ui-toast-notification';

• Use in your component:

const { triggerNotification, notificationComponent } = useNotification('top-right');

return (
  <div>
    <button
      onClick={() =>
        triggerNotification({
          message: 'This is a success notification!',
          type: 'success',
          duration: 3000,
          position: 'top-right'
        })
      }
    >
      Show Notification
    </button>
    {notificationComponent}
  </div>
);

API

useNotification(position?: string)

Returns:

• triggerNotification(notificationProps: NotificationProps): Show a notification.
• notificationComponent: React element to render notifications.

NotificationProps

Name	Type	Description
message	string	Notification message
type	"success" | "error" | "info" | "warning"	Notification type
duration	number	Duration in ms before auto-dismiss
position	string	Position of notification

Styling

You can customize styles in src/components/notification.css.

Development

• Build: npm run rollup
• Source entry: src/index.ts
• Notification component: src/components/notification.tsx
• Hook: src/hooks/useNotification.tsx