Migrating from React-Toastify to toastory
Transition from React-Toastify to toastory for 5x lighter bundles, zero dependencies, and modern frosted glass design.
React-Toastify is widely used, but its bundle size exceeds 30 KB, it injects heavy inline CSS, and it provides no dialog or bottom sheet primitives.
Upgrading to toastory reduces bundle overhead to under 6 KB for core notifications while introducing Apple frosted glass styling and touch gestures.
---
Component & Method Mapping
| React-Toastify | toastory Equivalent | Notes |
|---|---|---|
| | Import from toastory/react. |
toast(msg) | toast(msg) | Default message toast. |
toast.success(msg) | toast.success(msg) | Identical call syntax. |
toast.error(msg) | toast.error(msg) | Identical call syntax. |
toast.warn(msg) | toast.warning(msg) | Renamed to standard warning. |
toast.info(msg) | toast.info(msg) | Identical call syntax. |
autoClose: 3000 | duration: 3000 | Standard milliseconds duration. |
hideProgressBar | progress: false | Built-in progress indicator control. |
pauseOnHover | pauseOn: ['hover'] | Granular pause reasons supported. |
closeOnClick | closeOnClick | Identical boolean flag. |
draggable | swipe | 4-direction velocity gesture dismissal. |
---
Side-by-Side Code Comparison
// Before (React-Toastify)
import { ToastContainer, toast } from 'react-toastify';function App() {
const notify = () => toast.success('Profile updated!', { autoClose: 3000 });
return (
<>
`
// After (toastory)
import { Toaster, toast } from 'toastory/react';function App() {
const notify = () => toast.success('Profile updated!', { duration: 3000 });
return (
<>
`
Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.