Notif Library

Notif Library is an Angular component that provides real-time notifications using Server-Sent Events (SSE). It is lightweight, customizable, and easy to integrate into Angular applications.

Features

• Real-time notifications via SSE
• Configurable timeout duration
• Adjustable position for desktop and mobile
• Custom CSS class support
• Option to show/hide logos

Installation

Install the library using npm:

npm install notif-library

Importing the Module

Add NotifLibraryModule to your Angular module:

import { NotifLibraryModule } from 'notif-library';

@NgModule({
  declarations: [...],
  imports: [
    NotifLibraryModule,
    ...
  ],
  providers: [],
  bootstrap: [...]
})
export class AppModule {}

Usage

Add the notification component in your template:

<notif-library *ngIf="isLoaded"
  [timeout]="12000"
  [showLogo]="false"
  position="top-right"
  mobilePosition="bottom"
  className="notif-custom-class"
  sseUrl="API_URL_HERE">
</notif-library>

Properties

| Property | Type | Default | Description | |---------------|---------|--------------|-------------| | sseUrl | string | '' | URL for SSE event source | | timeout | number | 12000 | Notification display duration (in ms) | | showLogo | boolean | true | Show/hide logo in notifications | | position | string | 'bottom-left' | Desktop notification position (top-left, top-right, bottom-left, bottom-right) | | mobilePosition | string | 'top' | Mobile notification position (top, bottom) | | className | string | '' | Custom CSS class for styling |

Example with Custom Styling

You can add custom styles by specifying a className and defining the styles in your global styles or component styles:

.notif-custom {
  background-color: #333;
  color: white;
}

License

This project is licensed under the MIT License. Feel free to use and modify it as needed.

Contact

For any issues or feature requests, open an issue on the GitHub repository or reach out to the maintainer.