Guide
Migrating
From toastr
toastr's last release was 2017 and its most-reacted issue asks whether the project is abandoned. It also needs jQuery — 29.6 kB before a single toast.
<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>
toastr.success/error/warning/info, toastr.clear() and the options people actually set —
timeOut, closeButton, positionClass — keep working. Everything else is ignored, not thrown. When
you are ready, swap the calls for toast.success(…) and drop the adapter.
| toastr | Here |
|---|---|
toastr.success('msg', 'title') |
toast.success('title', { description: 'msg' }) |
timeOut: 0 |
duration: 0 |
positionClass: 'toast-top-right' |
position: 'top-right' |
preventDuplicates |
toast(msg, { id: 'save' }) — the same id updates instead of stacking |
toastr.clear() |
toast.dismiss() |
From react-hot-toast or sonner
The calls are nearly identical — toast.success, toast.error, toast.promise, toast.dismiss — so
most code moves unchanged. The differences:
| react-hot-toast / sonner | Here | |
|---|---|---|
| Weight | 5.0 kB / 9.9 kB plus React | 4.1 kB, no framework |
| Works outside React | no | yes — the same toast() in plain JS, Vue, Svelte |
| Dismiss button | asked for since 2020 | on by default |
| Over a modal dialog | not interactive | the toasts move inside the modal |
| Styling | inline styles / CSS-in-JS | CSS variables and classNames, nothing injected |
| CSP | a nonce is needed | no <style> is ever injected |
// was
import toast, { Toaster } from 'react-hot-toast';
// now
import { toast, Toaster } from '@devix-labs/toast/react';
toast.custom(<Component />) becomes toast.custom((node) => …): you are handed the element to fill,
which is what makes the same call work in every framework.
From SweetAlert2 toasts
Swal.fire({ toast: true, position: 'top-end', timer: 3000, icon: 'success', title: 'Saved' }) becomes
toast.success('Saved', { position: 'top-right', duration: 3000 }) — and 20.5 kB becomes 4.1 kB.
For SweetAlert2's dialogs, see Devix Confirm Dialog.