Reusable Toast-like Notification Box In Vanilla JavaScript – Foxx.js

Category: Javascript , Notification | September 15, 2020
Author:Codecherub
Views Total:51 views
Official Page:Go to website
Last Update:September 15, 2020
License:MIT

Preview:

Reusable Toast-like Notification Box In Vanilla JavaScript – Foxx.js

Description:

Foxx.js is a Vanilla JavaScript plugin to create reusable, customizable, toast-like notification boxes in 4 styles: success, info, warning, and error.

More Features:

  • Dark theme.
  • 7 positions.
  • 5 CSS3 powered animations.
  • Dismissable or not.
  • Custom icons.

How to use it:

1. Insert the required JavaScript and Stylesheet into the HTML page.

<link rel="stylesheet" href="foxx.css" />
<script src="foxx.js"></script>

2. Create toast notification boxes on the page:

fx.toast.success({
  title:'Success Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {/*options here*/}
}) 

fx.toast.info({
  title:'Info Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {/*options here*/}
}) 

fx.toast.warning({
  title:'Warning Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {/*options here*/}
}) 

fx.toast.error({
  title:'Error Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {/*options here*/}
})

3. Customize the notification box by passing the following settings to the opt object. All possible options:

  • position: Toast positioning (‘place_top_center’, ‘place_bottom_center’, ‘place_top_left’, ‘place_bottom_left’, ‘place_top_right’, ‘place_bottom_right’, ‘place_center’)
  • css: ‘Dark’ = dark theme; ‘Light’ = light theme
  • timeOut: Auto dimisses the toast after this timeout
  • delay: Time to wait before revealing the toast
  • animateIn: Animation name (‘fx_animate_swing’, ‘fx_animate_slideInRight’, ‘fx_animate_slideOutRight’, ‘fx_animate_fadeInBottom’, ‘fx_animate_fadeOutBottom’)
  • animateOut: The same as animateIn
  • placeAfter: Appends the toast to a specific container
  • dismiss: Determine if the toast is dismissable
  • icons: Custom icons here
fx.toast.success({
  title:'Success Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {
    position: 'place_top_right',
    css: '',
    timeOut: 10000000,
    delay: 0,
    animateIn: 'fx_animate_slideInRight',
    animateOut: 'fx_animate_slideOutRight',
    placeAfter: false,
    dismiss: true,
    icons: ({
      success: 'fx-icon-check',
      info: 'fx-icon-info',
      warning: 'fx-icon-block',
      error: 'fx-icon-exit'
    })
  }
})

You Might Be Interested In:


Leave a Reply