https://github.com/AlexKvazos/VanillaToasts

Agnostic Javascript Library for Website Notifications
https://github.com/AlexKvazos/VanillaToasts

css notifications toasts

Last synced: about 2 months ago
JSON representation

Agnostic Javascript Library for Website Notifications

• Host: GitHub
• URL: https://github.com/AlexKvazos/VanillaToasts
• Owner: AlexKvazos
• Created: 2015-05-26T20:11:16.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T05:52:17.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T02:19:02.495Z (2 months ago)
• Topics: css, notifications, toasts
• Language: HTML
• Homepage: http://alexkvazos.github.io/VanillaToasts/
• Size: 24.4 KB
• Stars: 105
• Watchers: 8
• Forks: 41
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• Awesome-JavaScript-Libraries - **VanillaToasts**

README

        
![VanillaToasts](http://puu.sh/iwxpd/eeee838c88.png)

-------

Create toasts & notifications on your website with ease. This library is extremely lightweight and depends on no other library. Simply load the script and css to your page, and use the simple API to start launching toasts on your page.

Check it out: http://alexkvazos.github.io/VanillaToasts/

# Installing

```

$ npm install vanillatoasts

var VanillaToasts = require('vanillatoasts');

```

Don't forget to include the CSS file!

```

 

```

# Usage

```

// Create a toast

let toast = VanillaToasts.create({

  title: 'Welcome to my site',

  text: 'This toast will hide after 5000ms or when you click it',

  type: 'warning', // success, info, warning, error   / optional parameter

  icon: '/img/alert-icon.jpg', // optional parameter

  timeout: 5000, // hide after 5000ms, // optional parameter

  callback: function() { ... } // executed when toast is clicked / optional parameter

});

// Hides the toast instantly

toast.hide()

// Timeout a toast at a later time

VanillaToasts.setTimeout(toast.id, 1000);

```

## Positioning the toast

To set a different position for the toast, use the `positionClass` property on the options of VanillaToast.

```

// Create a toast

let toast = VanillaToasts.create({

  title: 'Welcome to my site',

  text: 'This toast will hide after 5000ms or when you click it',

  positionClass: 'bottomLeft'

});

```

You can use any of the following values for the `positionClass` property:

* topRight

* topLeft

* topCenter

* bottomRight

* bottomLeft

* bottomCenter