@feelinglovelynow/toast NPM

🕉 @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 {

    }
  }
}