Skip to content

lightweight Javascript package for toast notification using tailwindcss

License

Notifications You must be signed in to change notification settings

Pavlovich4/ptoast

Repository files navigation

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