https://github.com/91ahmed/nostfly
An elegant javascript notification library featuring smooth animations, flexible positioning, and rich customization options.
https://github.com/91ahmed/nostfly
javascript-message-toaster javascript-notification nostfly nostfly-js notification notification-system notifications notify toast-message toast-notifications
Last synced: 17 days ago
JSON representation
An elegant javascript notification library featuring smooth animations, flexible positioning, and rich customization options.
- Host: GitHub
- URL: https://github.com/91ahmed/nostfly
- Owner: 91ahmed
- License: mit
- Created: 2025-02-14T21:53:24.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-02T14:18:09.000Z (3 months ago)
- Last Synced: 2025-04-05T02:47:04.359Z (about 2 months ago)
- Topics: javascript-message-toaster, javascript-notification, nostfly, nostfly-js, notification, notification-system, notifications, notify, toast-message, toast-notifications
- Language: CSS
- Homepage: https://91ahmed.github.io/projects/nostfly/
- Size: 172 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://91ahmed.github.io/projects/nostfly/) .
### Install
Use the CDN files
```html
```
Or download the latest version of Nostfly: [Download Here](https://91ahmed.github.io/projects/nostfly/nostfly.zip)
```html
```
### Install via npm
```bash
npm i nostfly
```
### Example
```javascript
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**
```javascript
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**
```javascript
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**
```javascript
new Nostfly({
closeAnimate: 'nostfly-close-slide-up'
})
```
> **Note:** You can add your own close animation class instead of using the available ones.
**e.g**
```javascript
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**
```javascript
new Nostfly({
openAnimate: 'nostfly-open-slide-up'
})
```
> **Note:** You can add your own open animation class instead of using the available ones.
**e.g**
```javascript
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**
```javascript
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
```javascript
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
})
```
