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

1. Import the hook:

import useNotification from 'ui-toast-notification';

2. 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