React, Vue, Svelte and the rest

The toaster is not a context or a store, so toast() works from anywhere — a component, a route handler, an axios interceptor, a web worker's message handler.

React#

import { Toaster, toast } from '@devix-labs/toast/react';
import '@devix-labs/toast/styles.css';

export default function App() {
  return (
    <>
      <Toaster position="top-center" max={4} />
      <button onClick={() => toast.success('Saved')}>Save</button>
    </>
  );
}

<Toaster /> only carries settings — it renders nothing, so it is safe in a server component tree and adds no wrapper to your DOM.

Vue#

<script setup>
import { Toaster, toast } from '@devix-labs/toast/vue';
</script>

<template>
  <Toaster position="top-center" />
  <button @click="toast.success('Saved')">Save</button>
</template>

Svelte#

<script>
  import { toast, configure } from '@devix-labs/toast/svelte';
  configure({ position: 'top-center' });
</script>

<button on:click={() => toast('Saved')}>Save</button>

Web component#

<script type="module" src="https://devix.pk/cdn/oss/toast@1.0.0/element.js"></script>
<dx-toaster position="top-center" max="4"></dx-toaster>
<script type="module">
  import { toast } from 'https://devix.pk/cdn/oss/toast@1.0.0/index.js';
  toast('Saved');
</script>

Pages on toastr#

toastr has been unmaintained since 2023 and needs jQuery. Keep the calls, drop both:

<!-- was: jquery.js + toastr.min.js + toastr.min.css -->
<link rel="stylesheet" href="https://devix.pk/cdn/oss/toast@1.0.0/toast.min.css">
<script type="module" src="https://devix.pk/cdn/oss/toast@1.0.0/jquery.js"></script>
<script>
  toastr.success('It worked', 'Title', { timeOut: 3000, positionClass: 'toast-top-right' });
</script>

timeOut, closeButton and positionClass are translated; toastr.clear() works. Everything else is ignored rather than thrown.

Laravel#

Flash a message and show it once the page loads:

@if (session('status'))
  <script type="module">
    import { toast } from '{{ asset('js/toast.js') }}';
    toast.success(@json(session('status')));
  </script>
@endif

With Inertia, put it in a shared prop and call toast in your layout's watch / useEffect.