MetonaToast

MetonaToast

轻量 · 零依赖 · 精致美观的 Toast 通知库。TypeScript 严格模式，gzip 不到 10KB，一切开箱即用。

📦 <10KB gzip 🎨 107 图标 🎭 11 动画 🧩 4 插件 🔗 17 钩子 ⚛️ React 适配器 🌍 国际化

核心特性

你需要的一切，都在一个不到 10KB 的包中

⚡

零依赖

TypeScript 严格模式，纯原生实现，无任何运行时依赖。兼容所有现代浏览器。

🎨

107 种图标类型

success / error / warning / info / loading 及 100+ 扩展类型，覆盖所有常见场景。

🎭

11 种动画 + 自定义

每种感官差异明显，animations.register() 注册自定义动画，动态注入 keyframes 真实生效。

🖌️

主题系统

light / dark / auto / warm 内置主题，registerTheme() 自定义，跟随系统自动切换。

🌍

国际化

zh-CN / en-US 完整翻译，addTranslations() 扩展任意语言，RTL 完整适配。

🧩

插件系统

4 款预设：keyboard / persistence / accessibility / dedupe，支持自定义插件架构。

🔗

17 个钩子

完整生命周期钩子，beforeShow / beforeClose / beforeUpdate 支持拦截。

✋

拖拽关闭

任意方向拖动即关，阈值 dragThreshold 可配置。Pointer Events 全端一致。

⚛️

React 适配器

@metona-team/metona-toast/react — useToast hook + 声明式 Toast 组件，主包保持零依赖。

🛡️

错误捕获

全局 onError 回调捕获钩子与定时器异常，方便接入 Sentry、DataDog。

⏱️

暂停恢复

悬停暂停、拖拽暂停、手动 pause/resume，剩余时间精确保持不丢失。

📘

类型安全

严格模式源码，类型自动生成零漂移。加载态转换 id 稳定，原地更新。

快速开始

浏览器上仅注册两个全局变量：MeToast 和 Met，完全等价

quickstart.js

# 安装
npm install @metona-team/metona-toast

// 导入
import MeToast from '@metona-team/metona-toast';

// 使用
MeToast.success('操作成功！');
MeToast.error('操作失败！');
MeToast.loading('加载中...');

// CDN 直接引用
<script src="https://git.metona.cn/MetonaTeam/MetonaToast/raw/branch/master/dist/metona-toast.min.js"></script>

高级功能速览

不仅仅是 Toast — 确认框、输入框、进度条、倒计时、队列、Action，应有尽有

advanced.js

// Promise 风格 — 自动 loading → success/error
await MeToast.promise(fetch('/api/data'), {
  loading: '加载中...', success: '完成', error: '失败'
});

// 确认 / 输入对话框
const ok = await MeToast.confirm('确定删除？', { confirmText: '删除' });
const name = await MeToast.prompt('请输入姓名');

// Action Toast — 内嵌操作按钮
MeToast.action('文件已删除', [
  { text: '撤销', onClick: () => restore() },
  { text: '查看', onClick: () => open(), close: false },
]);

// 加载 → 链式转换（id 稳定）
const loading = MeToast.loading('正在提交...');
setTimeout(() => loading.success('提交成功！'), 2000);

核心特性

零依赖

107 种图标类型

11 种动画 + 自定义

主题系统

国际化

插件系统

17 个钩子

拖拽关闭

React 适配器

错误捕获

暂停恢复

类型安全

快速开始

高级功能速览

主题切换

环境支持

Chrome

Firefox

Safari

Edge

iOS Safari

Android

Node.js

TypeScript

开始使用 MetonaToast