ptoast is a lightweight Javascript package for toast notification using tailwindcss

How to use

This package requires tailwindcss so don't forget to install tailwindcss and configure it

install package from npm

npm install p-toast 
#or
yarn install p-toast

Import module to your script

import {toast} from 'p-toast';

Add this to tailwind.config.js file in the content array. Because of the JIT we need this to make classes available

  "./node_modules/p-toast/src/*.ts"

Use

toast.success('My title', 'My first toast !!');
toast.error('My title', 'My first toast !!');

Use with own options

toast.withOptions({
    duration: 5000, // default,
    position: 'top-right'
    /*...*/
}).success();
//or
toast.options = {
    duration: 5000, // default,
    position: 'top-right'
    /*...*/
}

Animation

By default, the toast won't be animated. If you want to add some animation to the toast you need to add this to you js :

import 'p-toast/ptoast.css'

Available options are : slideUp, slideDown, slideRight, slideLeft, fadeIn

you can add them via the default option like this toast.withOptions({animation: 'slidUp'})

Progress Bar

By default, each toast you'll fire will show a progress bar. If you want to disable this just use the option progress like this toast.withOptions({progress: false})...

Close button

By default, each toast has a close button. To disable it do this : toast.withOptions({close: false})...

Available methods

• successto fire success toast
• warningto fire warning toast
• infoto fire blue toast
• errorto fire error toast
• withOptions to define toast options
  • duration in ms: define the number of seconds the toast should be shown (default to 5000ms)
  • position: the position of the toast (available: top-right, top-left, bottom-right, bottom-left)

TODO

• ⏳Should stop/pause the progress if hover
• ⏳add more options
• ⏳Add prettier