🕉 @feelinglovelynow/toast

💎 Install

pnpm add @feelinglovelynow/toast

🤓 Unit Tests

🙏 Description

• Show a closeable success or info toast notification
• Toast closes by default after 9 seconds but this is alterable with the ms option
• Toast function returns the dom id for the toast and a removeToast() function
• @returns { { id: string, removeToast: () => void } }
• Toast id can locate the toast and the close button on the toast
• <div id="${ id }" class="fln__toast fln__toast--${ type }">
• <button id="${ id }__close" class="fln__toast__close">
• showToast() recieves a string or an array of items
  • IF string => toast shows as a <span>
  • ELSE IF array.length is 1 => toast shows as a <span>
  • ELSE => toast shows as an unordered list
• Includes lovely multiple toast showing animations for sliding / fading in and sliding / fading away

💚 Properties

import { showToast } from '@feelinglovelynow/toast'

showToast (type: 'info' | 'success', items: string | string[], ms = 9000): () => void

💛 Add wrapper to DOM

<div id="fln__toast-wrapper"></div>

🧡 Add imports

import '@feelinglovelynow/toast/index.css'
import { showToast } from '@feelinglovelynow/toast'

❤️ Example: Show info toast

const { id, removeToast } = showToast('info', 'Foo')

💟 Example: Show success toast

• With 2 items that will show as an unordered list in the array order
• 2nd item has an html link
• Auto close in 6 seconds

showToast('success', [ 'Foo', '<a href="/">Bar</a>' ], 6000)

🌟 Prerequisite CSS

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

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

@keyframes fln__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%;
}

✨ Add custom styling

#fln__toast-wrapper {

}

.fln__toast {
  &.fln__toast--hide {

  }
  &.fln__toast--info {

    .fln__toast__icon-wrapper {

      .fln__toast__icon {

      }
    }
  }
  &.fln__toast--success {

    .fln__toast__icon-wrapper {

      .fln__toast__icon {

      }
    }
  }

  &__icon-wrapper {

  }

  &__icon {

  }

  ul {

  }

  li {

  }

  span {

  }

  &__close {
    &:hover {

    }

    svg {

    }
  }
}

🎁 All Our Packages

1. @feelinglovelynow/datetime-local: NPM ⋅ Github
2. @feelinglovelynow/dgraph: NPM ⋅ Github
3. @feelinglovelynow/env-write: NPM ⋅ Github
4. @feelinglovelynow/get-form-entries: NPM ⋅ Github
5. @feelinglovelynow/get-relative-time: NPM ⋅ Github
6. @feelinglovelynow/global-style: NPM ⋅ Github
7. @feelinglovelynow/jwt: NPM ⋅ Github
8. @feelinglovelynow/loop-backwards: NPM ⋅ Github
9. @feelinglovelynow/slug: NPM ⋅ Github
10. @feelinglovelynow/svelte-catch: NPM ⋅ Github
11. @feelinglovelynow/svelte-kv: NPM ⋅ Github
12. @feelinglovelynow/svelte-loading-anchor: NPM ⋅ Github
13. @feelinglovelynow/svelte-modal: NPM ⋅ Github
14. @feelinglovelynow/svelte-turnstile: NPM ⋅ Github
15. @feelinglovelynow/toast: NPM ⋅ Github