Toast

Sourdough Toast

A plain JS toast notification — inspired by Sonner

GitHub

Installation

npm install sourdough-toast

Usage

import { Sourdough, toast } from "sourdough-toast";

const sourdough = new Sourdough();

window.addEventListener("DOMContentLoaded", () => {
  sourdough.boot();
});

toast("Hi!");

Usage (CDN)

<script type="module">
  import { Sourdough, toast } from "https://esm.run/sourdough-toast";
  const sourdough = new Sourdough();

  window.addEventListener("DOMContentLoaded", () => {
    sourdough.boot();
  });

  window.toast = toast;
</script>
<button onclick="toast('hi!')">Toast</button>

Types

Options

Key Default Description
maxToasts 3 Max number of toasts on screen
duration 4000 How fast toasts disappear
width 356 Width of the toasts (on desktop)
gap 14 Distance between stacked toasts
theme "light" Or dark
viewportOffset 32 Distance to edge of window
expandedByDefault false Don't stack toasts
yPosition "bottom" Or "top"
xPosition "right" Or "left" or "center"
richColors false More colorful toasts

Made by mikker.