Tailwind Toast 🍞

FYI - Working on a pretty big update, same concept, v2 ETA End of March

Usage

You can pull the package in with npm install tailwind-toast!

Then create a twtoast.config.js file in the root of your directory.

{
  //default values
  modules: [
    //custom modules
  ]
}

Here you can define your default values and create custom modules

The fastest way to get started would be to require the package and call one of the default modules:

const { toast, snackbar } = require('tailwind-toast')

toast().default('Title', 'Message!').show()

There are some quick commands to help specify some major parts of your toast

show() //this does not return the object, but shows the toast or snackbar with the parameters

for(ms) //specify how long the toast will be displayed, in miliseconds
/* Example */
toast().warning('Hey!', 'There was a minor error!').for(3000).show() //display for 3000ms

as(shape) //specify the shape of the toast or snackbar ('pill' or 'square')
/* Example */
toast().success('Great!', 'We saved it!').as('pill').show() //show pill shaped toast

from(positionY, positionX) //specify the location
//Y only is ok
//Y options are 'top' and 'bottom'
//X options are 'start', 'end', and 'center'
/* Example */
toast().default(null, 'Jocelyn just logged on!').from('bottom', 'end').show() //display toast at bottom right

with(parameters) //a catch all to change any setting {setting: value}
/* Example */
toast()
.warning('Hey!', 'There was a minor error!')
.with({
  shape: 'pill',
  duration: 4000,
  speed: 1000,
  positionX: 'end',
  positionY: 'top',
  color: 'bg-blue-800',
  fontColor: 'blue',
  fontTone: 200
}).show() //display with all parameters

addButtons(buttons) //add buttons to snackbar {title: () => action}, {anotherTitle: () => action}
/* Example */
snackBar()
.danger('Hey!', 'You just deleted the message!')
.addButtons(
  { undo: () => {
      undoDeleteMessage()
    }
  }
)
.show()

hide() //snackbar only, this helper can hide the snackbar as one of the button functions
/* Example */
let snackBar = snackbar()
snackBar
.danger('Cookies!', 'This website uses cookies! Yum!')
.addButtons(
  { accept: () => {
      snackBar.hide()
    }
  }
)
.show()

The default modules are:

danger() //red box with grey text and an hand icon
success() //green box with grey text and a check mark icon
warning() //yellow box with grey text and a warning icon
default() //changes no default styling

Options

"color", -> the background color of the snackbar or toast (tailwind colors) with the tone (ie. bg-blue-500)
"title", -> the title which is shown first in bold
"message", -> the message which is show second and not bold
"icon", -> the icon on the far left
"duration", -> how long the toast should stay for
"postion", -> positionY (top or bottom) and positionX (start, end, center)
"fontColor", -> color of the font
"fontTone", -> tailwind font tone (ie. text-blue-"500")
"shape", -> square (rounded) or pill (rounded-full)
"speed" -> the speed the toast will appear and disappear (75, 100, 150, 200, 300, 500, 700, 1000)

Adding custom modules

In your twtoast.config.js file you can add custom modules. Make sure to return this

{
  //default values
  modules: [
    myModule: (title, message) => {
      this.color = 'bg-indigo-200'
      this.fontColor = 'indigo'
      this.fontTone = 800
      this.shape = 'pill'
      this.postionY = 'top'
      this.positionX = 'start'
      return this
    }
  ]
}