2023 年作者构建了名为Sonner的 React Toast 库，在文中分享了构建过程中的经验教训和错误。

• Animations：初始使用 CSS keyframes 做进入和退出动画，不可中断，后改用 CSS 过渡，可在第一个过渡结束前平滑过渡到新值。通过useEffect设置挂载状态来模拟进入动画，样式基于数据属性。
• Stacking toasts：通过将 toast 之间的间隙乘以 toast 的索引来创建堆叠效果，每个 toast 都设置position: absolute，还按比例缩放以创建深度错觉。若 toast 高度不同，会使堆叠效果不均匀，可将堆叠模式下的 toast 高度设为前面 toast 的高度。
• Swiping：toast 可向下滑动删除，通过简单的事件监听器更新translateY值，滑动基于动量，若滑动速度足够快则 toast 会被删除。
• Expanding toasts：计算每个 toast 的展开位置，即前面所有 toast 的高度加上间隙，当用户悬停在 toast 区域时，新的translateY值即为展开位置。
• State management：通过观察者模式管理状态，避免使用context。在<Toaster />组件中订阅可观察对象，当调用toast()函数时，<Toaster />组件更新状态并渲染所有 toast。创建新 toast 只需导入toast并调用函数。
• Hover state：悬停状态取决于是否悬停在 toast 上，通过添加:after伪元素填充间隙来确保一致的悬停状态。
• Pointer capture：开始拖动时设置 toast 捕获所有后续指针事件，确保拖动过程中即使鼠标或拇指移出 toast 仍可继续拖动，提升用户体验。
• Why is Sonner successful?：每周从 npm 下载量超过 150 万次，原因一是开发者体验好，无需 hooks 和 context，插入<Toaster />并调用toast()即可；二是外观好看，有良好的默认值和动画。若想学习构建类似 Sonner 的组件，可查看动画课程Check out "Animations on the Web"。完整源代码可here，也可订阅每月新闻通讯。