@sensethenlove/toast v1.0.8

🕉 @sensethenlove/toast

🙏 Description

Show a closeable success and/or info toast notification

💎 Prerequisites

Requires @sensethenlove/global-style or add this css to your site

@keyframes fade-in-from-above {
  0% {
    opacity: 0;
    transform: translateY(-9rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out-and-slide-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-9rem);
  }
}

html { /* Helps w/ rem, can still look good w/o just set rem/px as desired: https://stackoverflow.com/questions/59920538  */
  font-size: 62.5%;
}

☯️ Install

pnpm add @sensethenlove/toast
pnpm add @sensethenlove/global-style # Only necessary if prerequisite css above is not present

🧡 Add wrapper to DOM

<div id="stl--toast-wrapper"></div>

❤️ Add css for wrapper to be your desired z-index

#stl--toast-wrapper {
  z-index: 90;
}

💛 Add imports

import showToast from '@sensethenlove/toast'
import '@sensethenlove/toast/lib/index.css'
import '@sensethenlove/global-style/lib/index.css' // Only necessary if prerequisite css above is not present

💙 Example: Show info toast

showToast({ type: 'info', items: [ 'Foo' ] })

💚 Example: Show success toast w/ 2 items & link

showToast({ type: 'success', items: [ 'Foo', '<a href="/">Bar</a>' ] })

💖 Our helpful packages!

• @sensethenlove/jwt
• @sensethenlove/slug
• @sensethenlove/env-write
• @sensethenlove/global-style
• @sensethenlove/svelte-modal
• @sensethenlove/loop-backwards
• @sensethenlove/svelte-turnstile