Notification

INEX SPA - Notifications System Documentation


πŸ”” Feature: In-Site Notifications

The Notifications system in INEX SPA allows developers to show beautiful, animated messages inside any part of the page. It supports multiple positions, types, and stacking notifications dynamically.


βš™οΈ Enable Notifications

To enable this feature, open your .env file and set:

USE_NOTIFICATION=true

Once enabled, the JavaScript function showNotification() will be available globally.


πŸ“‚ Files & Location

  • Notification Script: /public/JS/showNotification.js

  • Stylesheet: Inline or dynamically injected


πŸ”§ Function: showNotification(message, position = 'bottom-right', duration = 3000, type = 'primary')

Parameters:

  • message (string) – The message to show.

  • position (string) – Optional. One of:

    • bottom-right, bottom-left, top-right, top-left

  • duration (number) – Optional. Time in milliseconds before the notification auto-hides. Default is 3000 ms.

  • type (string) – Optional. One of:

    • success, info, danger, primary, secondary

Example:


✨ Features

  • Hyper animated gradients

  • Smooth entrance and exit animations

  • Multiple notifications stack at once

  • Auto hide after a given time

  • Manual hide via * button


🎨 Styling

Each type changes the background styling to match the purpose of the message. Positions are aligned with fixed CSS and animated using fade-in/out effects.


❗ Notes

  • No library required

  • Automatically injects styles

  • Customizable via the script file

  • Works even without a framework


βœ… Status

βœ… Lightweight βœ… Easy to configure βœ… Extensible βœ… No external libraries


Β© INEX SPA Team - Notification System

Last updated