Neurosis Prevention Mechanism

    tasty-toast

    1.0.2 • Public • Published

    tasty-toast

    Build Status npm Bower npm npm

    The world's tastiest notification widget (Part of the tasty framework)

    Demo

    You can find a small demo here.

    Installation

    You can get it on npm.

    npm install tasty-toast --save

    Or bower, too.

    bower install tasty-toast --save

    If you're not using either package manager, you can use tasty-toast by downloading the files in the dist folder.

    Including the JavaScript

    Place tasty-toast in the end of <body>.

    Including the CSS

    Place dist/tasty-toast.css or dist/tasty-toast.min.css in your document.

    Usage

    tasty-toast provides the easiest possible API to make notifications breeze in your applications.

    Tasty.Toast(options)

    You can provide options to customize tasty-toast. Here's an overview of the default values.

    Tasty.Toast({
      type: '', //['error','success','primary','secondary'] are possible values (or leave it empty for no theme)
      icon: '', //Insert your image here
      title: 'Hey there!',
      content: `You didn't fill out the content.`,
      duration: 6000,
      onclick: null
    });

    The options are detailed below.

    options.type

    The options.type property will give the notification the correct appearance. By default tasty-toast has no type. You can set the type of notification by setting the options.type property:

    Tasty.Toast({
      type: 'success'
    });

    options.type accepts 'success' or 'error'

    options.icon

    If you want to show an icon beside your notification just pass in an URL to an image like this:

    Tasty.Toast({
      icon: 'http://MYAWESOMEPAGE.com/COOLICON.png'
    });

    options.icon accepts a string as input and ignores all other types.

    options.title

    By default tasty-toast has "Hey there" as the title text. You can change the title text by sending them in to the options at initialization:

    Tasty.Toast({
      title: 'Hey there, something awsome happened!'
    });

    options.title accepts a string as input and ignores all other types.

    options.content

    By default tasty-toast has "You didn't fill out the content." as content. You can change the content by sending them in to the options at initialization:

    Tasty.Toast({
      content: 'You have recieved a <b>gift</b>.'
    });

    options.content accepts a string as input. You can use HTML here... just sayin

    options.duration

    By default tasty-toast has a duration of 6000 miliseconds. You can set your own duration by setting the duration property at initialization:

    Tasty.Toast({
      duration: 10000 // show me 10 seconds please
    });

    options.duration accepts a number as input. The number represents the duration in miliseconds

    options.onclick

    With options.onclick you can set a custom action when the notification object is clicked!

    Tasty.Toast({
      onclick: function(){
        console.log('I do stuff...')
      }
    });

    options.onclick accepts a function as input


    Great shoutout to Kent C. Dodds for providing great tutorials on how to write an open source library

    Install

    npm i tasty-toast

    DownloadsWeekly Downloads

    11

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • crsten