Migrating from react-hot-toast to toastory
Upgrade from react-hot-toast to toastory with drop-in toast methods, enhanced promise handling, accessible dialogs, and Apple frosted glass styling.
react-hot-toast pioneered minimal React toast libraries. toastory retains that same developer ergonomic simplicity while modernizing visual fidelity, accessibility, and multi-framework support.
---
Syntax & Method Equivalents
| react-hot-toast | toastory Equivalent | Notes |
|---|---|---|
| | Import from toastory/react. |
toast('Hello') | toast('Hello') | Direct string notification. |
toast.success('Done') | toast.success('Done') | Green semantic success toast. |
toast.error('Failed') | toast.error('Failed') | Red semantic error toast. |
toast.loading('Loading') | toast.loading('Loading') | Glass loading spinner. |
toast.promise(p, msgs) | toast.promise(p, msgs) | Async promise flow. |
toast.custom(fn) | toast.custom(fn) | Custom JSX component rendering. |
toast.dismiss(id) | toast.dismiss(id) | Dismiss single or all toasts. |
---
Side-by-Side Promise Example
// Before (react-hot-toast)
toast.promise(
fetchData(),
{
loading: 'Loading...',
success: <b>Settings saved!</b>,
error: <b>Could not save.</b>,
}// After (toastory)
const handle = toast.promise(
fetchData(),
{
loading: 'Loading application data...',
success: (data) => Settings saved for ${data.username},
error: (err) => Failed: ${(err as Error).message},
description: 'Synchronized with cloud replica.',
}
);
// toastory also lets you unwrap the result:
const result = await handle.unwrap();
`
Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.