goey-toast：839⭐的轻量级 React Toast 通知库

今天发现一个轻量级的 React Toast 通知库 —— goey-toast，虽然 stars 不多（839），但功能简洁实用，值得一看。

项目概览

属性	内容
GitHub	anl331/goey-toast
Stars	839
语言	TypeScript
特点	轻量、无依赖、可定制
最后更新	6天前

核心特性

• 轻量无依赖：核心代码精简，不依赖其他 UI 库
• TypeScript 支持：完整的类型定义
• 高度可定制：支持自定义样式、位置、动画
• 多种通知类型：success、error、warning、info
• 自动关闭：可配置自动关闭时间
• 堆叠管理：自动管理多个 Toast 的堆叠显示

快速开始

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

基础用法

import { ToastContainer, toast } from 'goey-toast';
import 'goey-toast/dist/style.css';

function App() {
  return (
    <div>
      <button onClick={() => toast.success('操作成功！')}>
        显示成功通知
      </button>
      <button onClick={() => toast.error('操作失败！')}>
        显示错误通知
      </button>
      <ToastContainer />
    </div>
  );
}

高级用法

自定义配置

toast.success('成功', {
  duration: 4000,        // 显示4秒
  position: 'top-center', // 顶部居中
  style: {
    background: '#10b981',
    color: '#fff',
  },
});

自定义组件

<ToastContainer
  position="bottom-right"
  autoClose={3000}
  hideProgressBar={false}
  newestOnTop
  closeOnClick
  rtl={false}
  pauseOnFocusLoss
  draggable
  pauseOnHover
/>

适用场景

• 表单提交反馈
• 操作成功/失败提示
• 系统通知
• 轻量级消息提醒

与其他库对比

库	Stars	特点
react-toastify	13.4k	功能丰富，生态成熟
react-hot-toast	10.9k	简洁易用
goey-toast	839	轻量、无依赖、可定制

如果你需要一个简单、轻量、无额外依赖的 Toast 库，goey-toast 是个不错的选择。

---

文章发表于 gumi.ink