Nostfly

A lightweight and customizable JavaScript notifications library designed for sleek, non-intrusive alerts. Featuring smooth animations, flexible positioning, and rich customization options, it enhances user experience with effortless integration. Ideal for modern web applications, it supports auto-dismiss, interactive actions, and theme adaptability for a seamless UI.

Live Demo

Experience Nostfly in action live: Live Demo .

Install

Use the CDN files

<!-- Css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/91ahmed/nostfly/dist/css/nostfly.min.css">

<!-- Js -->
<script src="https://cdn.jsdelivr.net/gh/91ahmed/nostfly/dist/js/nostfly.min.js"></script>

Or download the latest version of Nostfly: Download Here

<!-- Css -->
<link rel="stylesheet" href="nostfly.min.css">

<!-- Js -->
<script src="nostfly.min.js"></script>

Install via npm

npm i nostfly

Example

new Nostfly ({
    style: 'warning',
    position: 'top-right',
    header: 'Your header here', // accept html
    content: 'Your content here', // accept html
    delay: 5000
})

Properties

style :

You can select the style that suits you from these options:

• warning
• success
• error
• attention
• notify
• note

Property | Type | Default :--- | :--- | :--- style | string | 'notify'

e.g

new Nostfly({
    style: 'success'
})

position :

Change the notification position to one of the following options:

• top-right
• top-left
• top-center
• bottom-right
• bottom-left
• bottom-center

Property | Type | Default :--- | :--- | :--- position | string | 'top-right'

e.g

new Nostfly({
    position: 'bottom-right'
})

closeAnimate :

Customize the close animation by choosing from the following options:

• nostfly-close-slide-right
• nostfly-close-slide-left
• nostfly-close-slide-up
• nostfly-close-slide-down
• nostfly-close-fade

Property | Type | Default :--- | :--- | :--- closeAnimate | string | 'nostfly-close-slide-right'

e.g

new Nostfly({
    closeAnimate: 'nostfly-close-slide-up'
})

Note: You can add your own close animation class instead of using the available ones.

e.g

new Nostfly({
    closeAnimate: 'your-custom-class'
})

openAnimate :

Customize the open animation by choosing from the following options:

• nostfly-open-slide-right
• nostfly-open-slide-left
• nostfly-open-slide-up
• nostfly-open-slide-down
• nostfly-open-fade

Property | Type | Default :--- | :--- | :--- openAnimate | string | 'nostfly-open-slide-right'

e.g

new Nostfly({
    openAnimate: 'nostfly-open-slide-up'
})

Note: You can add your own open animation class instead of using the available ones.

e.g

new Nostfly({
    openAnimate: 'your-custom-class'
})

loader :

You can choose whether to display the loader or not by changing the loader value to false or true.

Property | Type | Default :--- | :--- | :--- loader | boolean | true

loaderPosition :

You can set the loader position to either top or bottom.

Property | Type | Default :--- | :--- | :--- loaderPosition | string | 'top'

delay :

You can set the delay time in (milliseconds) by change this property value.

Property | Type | Default :--- | :--- | :--- delay | number | 4000

auto :

Automatically remove the notification after the specified delay time expires.

Property | Type | Default :--- | :--- | :--- auto | boolean | true

iconHeader :

You can remove the default icon header by change the property value to false.

Property | Type | Default :--- | :--- | :--- iconHeader | boolean | true

e.g

new Nostfly({
    iconHeader: false,
    header: 'Your New Header'
})

class :

This property allow you to add a custom CSS class to the notification container.

Property | Type | Default :--- | :--- | :--- class | string | null

Full Example

new Nostfly ({
    style: 'attention',
    class: 'custom-class',
    position: 'bottom-right',
    closeAnimate: 'nostfly-close-slide-right',
    openAnimate: 'nostfly-open-slide-right',
    background: '#F85525',
    color:'#FBFAF2',
    iconHeader: true,
    header: 'Hello Geist', // accept html
    content: 'Please reach me out as soon as possible.', // accept html
    auto: true,
    loader: true,
    delay: 6000
})