如果你厌倦了千篇一律的 Toast 通知弹出效果，也许这个组件能给你带来一些新鲜感。

goey-toast 是一个基于 Sonner 和 Framer Motion 打造的 React Toast 组件，核心卖点是它独特的”黏腻变形”动画效果——当多个 Toast 堆叠或消失时，它们会像水滴一样融合、拉伸、变形，给人一种柔软有机的视觉体验。

项目概览

属性内容
GitHubanl331/goey-toast
Stars867
语言TypeScript
特点黏腻变形动画、基于 Sonner、Framer Motion 驱动
最后更新2 周前

它解决了什么问题

Toast 通知是前端开发中最常见的 UI 组件之一，但大多数实现都过于”机械化”——突然出现、生硬消失、整齐堆叠。虽然功能完备，但缺乏个性。

goey-toast 尝试用一种更有机的方式呈现通知：

  • 黏腻融合：多个 Toast 会像水滴一样融合在一起
  • 弹性变形：Toast 在出现和消失时会有拉伸和回弹效果
  • 流体动画：整体动画流畅自然，没有生硬的跳跃感

这种效果尤其适合那些希望在 UI 中注入一些趣味性和品牌个性的产品。

核心特性

1. 基于成熟方案

goey-toast 底层基于 Sonner，这意味着你获得的是经过验证的稳定 API，同时额外获得了独特的动画效果。

2. 零配置开箱即用

import { Toaster } from 'goey-toast';

function App() {
  return (
    <>
      <Toaster />
      {/* 你的应用 */}
    </>
  );
}

触发通知同样简单：

import { toast } from 'goey-toast';

toast.success('操作成功！');
toast.error('出了点问题...');

3. 可定制性强

虽然主打黏腻效果，但你依然可以自定义：

  • Toast 持续时间
  • 位置（上/下/左/右）
  • 最大显示数量
  • 主题配色

4. TypeScript 原生支持

项目完全用 TypeScript 编写，类型定义完整，IDE 提示友好。

快速上手

npm install goey-toast
# 或
yarn add goey-toast
# 或
pnpm add goey-toast

在应用根组件添加 Toaster：

import { Toaster } from 'goey-toast';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

然后在任何地方触发通知：

import { toast } from 'goey-toast';

function MyComponent() {
  const handleClick = () => {
    toast.promise(
      fetch('/api/data'),
      {
        loading: '加载中...',
        success: '数据加载成功',
        error: '加载失败',
      }
    );
  };

  return <button onClick={handleClick}>获取数据</button>;
}

同类对比

工具Stars特点
react-hot-toast9.2k功能全面、轻量、但动画传统
Sonner10.1k现代设计、堆叠优化、但缺少黏腻效果
react-toastify12.8k成熟稳定、功能丰富、但体积较大
goey-toast867独特的黏腻变形动画、基于 Sonner

相比老牌方案，goey-toast 的优势不在于功能数量，而在于它提供了独特的视觉体验。如果你追求差异化 UI，这 867 个 star 的小众项目可能比那些上万 star 的通用库更合适。

适用场景

推荐使用

  • 创意型产品或工具类应用
  • 希望 UI 有记忆点的 B 端产品
  • 品牌调性偏向活泼、年轻的产品
  • 内部工具或 MVP 的快速美化

不推荐

  • 严肃的企业级管理系统（动画可能显得不够专业）
  • 性能敏感的场景（Framer Motion 有一定开销）
  • 需要兼容 IE 的项目（依赖现代 CSS）

注意事项

  • 体积：由于依赖 Framer Motion，包体积比纯 CSS 方案大一些
  • 可访问性：独特的动画效果可能对敏感用户造成不适，建议提供减弱动画的选项
  • 浏览器支持：需要支持 CSS filter 和 SVG filter 的现代浏览器

总结

goey-toast 是一个让人眼前一亮的 Toast 组件。它没有试图成为功能最全的方案，而是专注于提供独特的视觉体验。对于希望在产品中注入一些个性和趣味的前端开发者来说，这个 867 star 的小众项目值得一试。

你可以在这里查看在线演示，感受那种独特的黏腻变形效果。

属性内容
仓库https://github.com/anl331/goey-toast
许可证MIT
语言TypeScript
维护者@anl331