Kendi toast mesajınızı yazın

Web uygulamalarda temel ihtiyaçlardan biri, bir işlem gerçekleşirken veya gerçekleştikten sonra kullanıcının haberdar edilmesidir. Toast mesajlar burada yardımımıza yetişir. Bunu hakkıyla yapan yığınla NPM paket var ancak bazen yeterli olmayabiliyorlar, araya girip bir şeyleri değiştirmemiz gerekiyor. Peki kendimiz yazsak nasıl yazardık?

Toast mesaj temelde kolayca call edilebilen bir function olmalıdır.

message.success('This is a success message', 'Congratulations!')

Örnekteki gibi call edilebilen bir function işimizi görecektir.

Hadi başlayalım

Öncelikle toast mesajın ihtiyaç duyacağı HTML elementleri oluşturan ve ekrana basan bir function yazalım.

toast-message.ts
function printer(type = '', message = '', title = '', duration = 3) {
  const toastWrapper = document.createElement('div')
  toastWrapper.classList.add('toast-wrapper')
  toastWrapper.innerHTML = `
  <div class="toast ${type}">
    <div class="toast__title">${title}</div>
    <div class="toast__message">${message}</div>
  </div>
`
toastWrapper.style.animationDuration = `${duration}s`
document.body.appendChild(toastWrapper)
setTimeout(() => {
    toastWrapper.remove()
  }, duration * 1000)
}

Burada adı geçen elementlere CSS ile çeki düzen verelim.

toast.css
.toast-wrapper {
  position: fixed;
  inset: 0;
  top: 1em;
  height: max-content;
  display: grid;
  place-content: center;
  animation-name: toast-top;
  animation-fill-mode: forwards;
  font-size: 0.9em;
}
.toast {
  background-color: #fff;
  color: #222;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  padding: 0.5em 1em;
  border-radius: 0.5em;
}
.toast__title {
  font-size: 1.2em;
  font-weight: 600;
  padding: 0.2em 0;
}

Adı geçen toast-top animasyonunu oluşturalım.

toast.css
@keyframes toast-top {
  0% {
    transform: translateY(-100%);
  }
  20% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(5%);
  }
  90% {
    transform: translateY(25%);
  }
  100% {
    transform: translateY(-200%);
  }
}

printer function’umuzu export edelim.

toast-message.ts
const message = {
  info: printer.bind(null, 'info'),
  success: printer.bind(null, 'success'),
  error: printer.bind(null, 'error'),
  warning: printer.bind(null, 'warning'),
}
export default message

Böylece dışarıda import ettikten sonra message.success gibi kullanabiliriz.

App.vue
<script setup>
import message from './toast-message'
</script>
<template>
   <button @click="message.error('Error message')">Error</button></template>

GitHub Repo: https://github.com/gayret/toast-message-in-vuejs

Canlı Demo: https://toast-message.netlify.app/