<script>
import { SvelteToast } from '@zerodevx/svelte-toast'

// Optionally set default options here
const options = {
  ...
}
</script>

...
<SvelteToast {options} />

Use anywhere in your app - just import the toast emitter.

MyComponent.svelte:

<script>
import { toast } from '@zerodevx/svelte-toast'
</script>

<button on:click={() => toast.push('Hello world!')}>EMIT TOAST</button>

Vanilla JS

For any other application with a bundler, something like this should work:

import { SvelteToast, toast } from '@zerodevx/svelte-toast'

const app = new SvelteToast({
  // Set where the toast container should be appended into
  target: document.body,
  props: {
    options: {
      // Optionally set default options here
      ...
    }
  }
})

toast.push('Hello world!')

CDN

Or if you prefer to go old-school javascript and a CDN:

<head>
  ...
  <script>
    function registerToast() {
      window.toastApp = new SvelteToastUMD.SvelteToast({
        target: document.body
      });
      window.toast = SvelteToastUMD.toast;

      // Now you can `toast` anywhere!
      toast.push('Hello world!');
    }
  </script>
  <script defer src="https://cdn.jsdelivr.net/npm/@zerodevx/svelte-toast@0" onload="registerToast()"></script>
</head>

Theming

In general, use CSS variables - the following (self-explanatory) vars are exposed:

._toastContainer {
  top: var(--toastContainerTop, 1.5rem);
  right: var(--toastContainerRight, 2rem);
  bottom: var(--toastContainerBottom, auto);
  left: var(--toastContainerLeft, auto);
}

._toastItem {
  width: var(--toastWidth, 16rem);
  height: var(--toastHeight, auto);
  min-height: var(--toastMinHeight, 3.5rem);
  margin: var(--toastMargin, 0 0 0.5rem 0);
  background: var(--toastBackground, rgba(66,66,66,0.9));
  color: var(--toastColor, #FFF);
}

._toastMsg {
  padding: var(--toastMsgPadding, 0.75rem 0.5rem);
}

._toastProgressBar {
  background: var(--toastProgressBackground, rgba(33,150,243,0.75));
}

So to apply your custom theme globally, do something like:

<style>
:root {
  --toastBackground: #ABCDEF;
  --toastColor: #123456;
  --toastHeight: 300px;
  ...
}
</style>

To apply CSS overrides to a particular Toast Item (on a per-toast basis), emit the toast with options:

toast.push('Yo!', {
  theme: {
    '--toastBackground': 'cyan',
    '--toastColor': 'black',
    ...
  }
})

where theme is an object containing one or more CSS var key/value pairs.

Rich HTML

Toast messages can be in rich HTML too - for example:

// Definitely not spam
toast.push(`<strong>You won the jackpot!</strong><br>
  Click <a href="#" target="_blank">here</a> for details! 😛`)

Custom Fonts

In a Svelte app, the easiest way to apply custom font styles is to wrap the toast container then apply styles on the wrapper:

<style>
  .wrap {
    font-family: Roboto, sans-serif;
    font-size: 0.875rem;
    ...
  }
  .wrap :global(strong) {
    font-weight: 600;
  }
</style>

<div class="wrap">
  <SvelteToast />
</div>

In Vanilla JS, simply apply your styles to the ._toastMsg class:

._toastMsg {
  font-family: Roboto, sans-serif;
  ...
}

Options

// Default options
const options = {
  duration: 4000,       // duration of progress bar tween
  dismissable: true,    // allow dismiss with close button
  initial: 1,           // initial progress bar value
  progress: 0,          // current progress
  reversed: false,      // insert new toast to bottom of stack
  intro: { x: 256 },    // toast intro fly animation settings
  theme: {}             // css var overrides
}

Toast API

const id = toast.push(message, { options })
toast.pop(id)
toast.set(id, { options })

License

ISC

To-do

Definitely improve the docs
Create some option presets

Keywords

FAQs

What is @zerodevx/svelte-toast?

Is @zerodevx/svelte-toast well maintained?

Package last updated on 19 Apr 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install